DOM 엘리먼트

DOM 엘리먼트

※ 공식 사이트에 한글로 번역이 이미 되어있으니 원문을 보시는 것을 추천드립니다.

React는 성능 및 호환성을 위해 브라우저 독립적인 DOM 시스템을 구현합니다.

React는 대부분의 속성에서 카멜 케이스를 사용하지만 aria-*와 data-*는 예외입니다.

---

Attribute의 차이

React와 HTML사이에는 다르게 작동하는 여러가지의 어트리뷰트들이 있습니다.

checked

<input>이 checkbox나 radio type 일 때 사용합니다. → 제어 컴포넌트에서 유용

defaultChecked는 컴포넌트가 처음 마운트 될 때 선택여부 설정 → 비제어 컴포넌트에서 사용

className

CSS class를 사용하려면 className attribute를 사용하세요. 모든 일반적인 DOM 및 SVG element에 적용됩니다.

단 React의 웹 컴포넌트를 사용 시 class를 사용해야합니다..

dangerouslySetInnerHTLM

브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법으로 XSS에 쉽게 노출되기 때문에 위험합니다. __html 키로된 객체를 전달해야합니다.

function MyComponent(){
	return <div dangerouslySetInnerHTML={__html: 'First &middot; Second'} />
}

htmlFor

for는 Javascript에서 예약어이므로 React는 htmlFor를 대신 사용합니다.

onChange

onChange 이벤트는 폼 필드가 변경될 때 이벤트가 발생합니다. 기본 브라우저의 동작을 사용하지 않는데 onChange를 사용시 정상적으로 동작하지 않습니다.

selected

<option>을 선택되었다고 표시하고 싶을 때 <select>의 value에서 해당 option값을 대신 참조

style

일반적으로 권장되는 스타일이 아닙니다.

style attribute는 css문자열 대신 카멜 케이스 프로퍼티를 가진 javascript 객체를 넣어줍니다. 이는 더 효율적이고 XSS 보안 허점을 방지합니다.

suppressContentEditableWarning

contentEditable로 표시되는 경고를 없앱니다. 단 Draft.js와 같이 contentEditable을 수동으로 관리하는 라이브러리를 만들지 않는 한 이 옵션을 사용할 일이 없습니다.

suppressHydrationsWarning

SSR을 사용하는 경우, 서버와 클라이언트 내용이 다를 때 사용합니다. suppressHydrationWarning을 true로 설정하면 React는 경고가 사라집니다. 바로 밑 depth에서만 작동하며, 남용해서는 안됩니다.

value

<input>, <select>, <textarea> 컴포넌트에 지원되는데, 이들의 값을 설정할 수 있으며, 제어컴포넌트를 만드는데 유용합니다. defaultValue는 비제어 컴포넌트에서 사용됩니다.

---

지원되는 모든 HTML Attribute

모든 표준, 사용자정의 DOM attribute들에 정상적으로 지원되는데 카멜케이스를 사용해야합니다.