DOM 속성
DOM 속성(attribute)
React에서는 모든 DOM 속성(attribute)을 카멜 표기법(camelCase)으로 표현합니다. 예를 들어, HTML 속성인 maxlength를 React에서는 maxLength로 표기해야 합니다.
예외적으로 aria-* 와 data-* 속성은 소문자로 표기하며, 사용자 지정 속성도 소문자로만 표기합니다.
그리고 HTML과는 다르게 표기해야 올바르게 동작하는 몇몇 DOM 속성도 존재합니다.
className
HTML 요소에 CSS 클래스를 사용하기 위해서 HTML에서는 아래 코드와 같이 class라는 속성을 사용하면 됩니다.
HTML
<div class="container"></div>
하지만 JSX에서는 class 대신 className이라는 속성을 사용해야 합니다. 이것은 class라는 단어가 자바스크립트 문법에서 클래스(class)를 생성하기 위한 키워드로 이미 예약되어 있기 때문에 중복을 피하기 위해 className을 사용해야 합니다.
JSX
<div className="container"></div>
React v15까지는 className을 사용하는 대신 실수로 class를 잘못 사용하게 되면 오류가 발생했었습니다.
하지만 React v16부터는 JSX 코드에 잘못 사용된 class 속성을 자동으로 className으로 변환해 줍니다. 그러나 의미 상의 혼동을 방지하기 위해서라도 JSX에서는 className 속성을 사용하는 것이 바람직합니다.
htmlFor
HTML의 for 속성도 자바스크립트에서 반복문을 정의하는 for 키워드와 중복되므로, JSX에서는 htmlFor 속성으로 바꿔 사용해야 합니다.
예제(App.js)
export default function App() {
return (
<>
<label htmlFor="name">이름 : </label>
<input id="name" type="text"></input>
</>
);
}
React에서 지원되는 HTML DOM 속성
React v16부터는 모든 표준 HTML DOM 속성들과 사용자 정의 DOM 속성들을 완벽하게 지원합니다.
지원되는 HTML DOM 속성 리스트
accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap
또한, SVG 속성들도 완벽하게 지원합니다.
지원되는 SVG 속성 리스트
accentHeight accumulate additive alignmentBaseline allowReorder alphabetic amplitude arabicForm ascent attributeName attributeType autoReverse azimuth baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight clip clipPath clipPathUnits clipRule colorInterpolation colorInterpolationFilters colorProfile colorRendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground end exponent externalResourcesRequired fill fillOpacity fillRule filter filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor limitingConeAngle local markerEnd markerHeight markerMid markerStart markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode numOctaves offset opacity operator order orient orientation origin overflow overlinePosition overlineThickness paintOrder panose1 pathLength patternContentUnits patternTransform patternUnits pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shapeRendering slope spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor textDecoration textLength textRendering to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan
