더북(TheBook)

3.4 React와 JSX의 까다로운 부분

 

이 절에서는 특수한 경우를 몇 가지 다룬다. JSX를 사용할 때 알고 있어야 할 까다로운 부분들이다.

예를 들어 JSX는 자식 엘리먼트가 없거나 단일 태그를 사용할 때는 태그를 닫을 때 반드시 슬래시(/)를 넣어야 한다. 다음 코드가 올바르게 작성한 예다.

<a href="http://azat.co">Azat, the master of callbacks</a>
<button label="Save" className="btn" onClick={this.handleSave}/>

 

다음과 같이 슬래시 없이 작성하는 것은 잘못된 방법이다.

<a href="http://azat.co">Azat<a>
<button label="Save" className="btn" onClick={this.handleSave}>

 

이와 다르게 HTML은 좀 더 관대하다. 대부분의 브라우저는 이를 무시하고, 슬래시가 없어도 정상적으로 렌더링한다. <button>Press me for yourself!를 어떻게 렌더링하는지 확인해보자.

이 외에도 HTML과 JSX는 다른 점들이 있다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.