React 개념 잡기 #4 (JSX와 규칙)

JSX 소개

JSX는 Javascript를 확장한 문법입니다

UI가 어떻게 생겨야 하는지 설명하는 역할을 합니다

---

JSX 규칙

1. 태그가 비어있다면 />을 이용해 태그를 바로 닫아주어야 합니다.

2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다.

3. 태그를 작성 할 때 이름 없이 작성하면 Fragment가 만들어 집니다.

<!-- JSX로 작성된 것 -->
<>
  <p>Hello, React!!</p>
  <p>안녕하세요<p>
</>

<!-- 브라우저에 표현된 것 -->
<div id="root">
  <p>Hello, React!!</p>
  <p>안녕하세요<p>
<div>

4. Javascript 표현식을 사용할 때는 중괄호{ }를 이용합니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

5. class는 className으로 표기해야 합니다.

6. 주석은 {/* */} 형태로 작성해야 합니다.