더북(TheBook)

2.4.7 꼭 닫아야 하는 태그

 

HTML 코드를 작성할 때 가끔 태그를 닫지 않을 때도 있습니다. 예를 들어 input은 꼭 <코드></input></코드>로 닫지 않아도 문제가 생기지 않으므로 다음과 같이 작성하기도 하지요.

태그를 닫지 않은 HTML 코드

<form>
  First name:<br>
  <input type=”text” name=”firstname”><br>
  Last name:<br>
  <input type=”text” name=”lastname”>
</form>

 

inputbr은 태그를 연 후 닫지 않았죠? 이 HTML 코드는 웹 브라우저에서 보일 때 전혀 문제가 없습니다. 하지만 JSX에서 이렇게 작성하면, Virtual DOM에서 트리 형태의 구조를 만들지 못하기 때문에 오류가 발생합니다. JSX에서는 다음과 같이 언제나 코드를 닫아 주어야 합니다.

<form>
  First name:<br/>
  <input type=”text” name=”firstname”/><br/>
  Last name:<br/>
  <input type=”text” name=”lastname”/>
</form>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.