[React] HTML과 다른 Attributes

React와 HTML 사이에는 다르게 작동하는 몇가지 어트리뷰트들이 있다. 

그래서 오늘은 다음 내용을 정리해보려고 한다. 

 

 

1. className

CSS class를 사용할때 React에서는 className으로 작성한다. 

// HTML
<div class="red">HTML</div>

// React
<div className="red"></div>

 

2. htmlFor

label 태그와 input 태그를 연결해줄때 HTML에서는 for 속성을 사용한다. 하지만 React에서는 for가 JavaScript 예약어이기때문에 htmlFor를 대신 사용한다. 

<input type="checkbox" id="checkAll">
<label htmlFor="checkAll">전체선택</label>

 

3. dangerouslySetInnerHTML

브라우저에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 

일반적으로 코드에서 HTML을 설정하는 것은 공격에 쉽게 노출될수있기 때문에 위험하다. 따라서 설정해줄수는 있지만, 위험하다는 것을 상기시키기 위해 이 속성을 작성하고 __html 키로 객체를 전달해야 한다. 

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

 

 

이 외에도 다른 몇가지 속성들이 있다. 

아래의 공식문서에서 다음 내용을 살펴볼 수 있다.

 

 

***************************

 

참고

https://ko.reactjs.org/docs/dom-elements.html

DOM 엘리먼트 – React