2.2.2 모든 태그 닫기

JSX를 사용할 때 가장 많이 실수하는 부분 중 하나가 태그를 닫는 방식입니다. HTML에서는 일부 태그를 닫지 않아도 아무 문제없이 작동합니다. 예를 들어, HTML에서는 다음과 같이 작성해도 됩니다.

HTML

<br>
<img>

이런 태그를 빈 태그(self-closing tag)라고 합니다. <br>, <img>, <input>처럼 내용 없이, 시작 태그만 존재하는 경우입니다.

하지만 JSX에서는 다릅니다. JSX에서는 빈 태그라도 <br/>처럼 자체 종료 태그(self-closing tag)를 사용해야 합니다. 즉, 모든 태그는 반드시 열고 닫는 구조를 가져야 하며, 빈 태그도 예외가 아닙니다.

JSX

<br />
<img />