Self-Closing Tags

Self-Closing Tags

Another JSX ‘gotcha’ involves self-closing tags.

What’s a self-closing tag?

Most HTML elements use two tags: an opening tag (<div>), and a closing tag (</div>). However, some HTML elements such as <img> and <input> use only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag; it’s a self-closing tag.

When you write a self-closing tag in HTML, it is optional to include a forward-slash immediately before the final angle-bracket:

 

Fine in HTML with a slash:

  <br />

Also fine, without the slash:

  <br>

 

But!

In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error:

Fine in JSX:

  <br />

NOT FINE AT ALL in JSX:

  <br>

---

Self-Closing Tags

 

또다른 JSX 'gotcha'는 self-closing tags포함한다.

self-closing tags이란 무엇인가?

 

대부분의 HTML요소들은 2 태그들을 사용한다. 오프닝태그<div>, 그리고 클로징태그</div>

그러나 <img>, <input>과 같은 몇몇의 html 요소들은 한 태그만 사용한다. 

이 단일태그 요소에 속하는 태그들은 오프닝 태그도, 클로징 태그도 아니다. 이것은 self-closing tag이다. 

 

당신이 html에서 self-closing tag를 사용할때, 마지막 >전에 /를 포함하는 것은 선택 사항이다.

 

Fine in HTML with a slash:

  <br />

Also fine, without the slash:

  <br>

 

그러나!

JSX에서는 당신은 /를 반드시 포함시켜야한다. 

만약 당신이 JSX에서 self-closing tag사용할때, /를 잊어버린다면, 에러가 날것이다. 

 

Fine in JSX:

  <br />

NOT FINE AT ALL in JSX:

  <br>

 

---

const profile = (
  <div>
    <h1>I AM JENKINS</h1>
    <img src="images/jenkins.png" />
    <article>
      I LIKE TO SIT
      <br/>
      JENKINS IS MY NAME
      <br/>
      THANKS HA LOT
    </article>
  </div>
);

 

 

출처: 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-advanced/exercises/self-closing-tags