[React] React 기본 - JSX 문법

JSX 문법이란?

리액트에서 생김새를 정의할 때, 사용하는 문법이다. HTML과 유사하게 생겼지만 실제로는 JavaScript이다!

const App = () => {
  return <div>Hello React!</div>
}

실제 JavaScript가 아닌데 브라우저가 어떻게 코드를 해석하는 걸까?

 

여기서 Babel에 대해 알아보자.

Babel은 JSX를 브라우저가 이해할 수 있도록 JavaScript로 변환해준다. 

 

그러나 JSX가 JavaScript로 오류 없이 제대로 변환되려면 규칙을 지켜야 한다.

 

1. 태그는 꼭 닫혀 있어야 한다.

const App = () => {
  return ( 
  <div>
    <h1>Hello</h1>
    <br>
    <input>
  </div>
  )
}

<br> , <input> 등 본래 HTML에서 닫혀있는 태그는 JSX에서 닫는 태그가 아니다!

당연히 태그 짝이 맞지 않아도 오류가 발생한다 ( div의 닫는 태그가 없는 경우 등등.. )

const App = () => {
  return ( 
  <div>
    <h1>Hello</h1>
    <br />
    <input />
  </div>
  )
}

위와 같이 작성해줘야 한다.

 

2. 태그는 감싸져야 한다!

const App = () => {
  return ( 
  <div>
    <h1>Hello</h1>
  </div>
  
  <div>
    <h1>Bye</h1>
  </div>
  )
}

아마 위 코드는 오류를 일으킬 것이다.

두 개의 태그가 형제 위치에 있을 때 해당 컴포넌트는 최상단의 하나의 태그로 감싸져 있어야 한다.

const App = () => {
  return ( 
  <>
      <div>
        <h1>Hello</h1>
      </div>

      <div>
        <h1>Bye</h1>
      </div>
  </>
  )
}

<div>, <main>, <article> 등도 당연히 되며, 빈 태그로도 동작하니 참고하자.

 

3. 내부의 JavaScript 값을 사용할 때 중괄호로 묶어주자!

const App = () => {
  const value = "Hello";
  return ( 
  <>
      <div>
        <h1>{value}</h1>
      </div>

      <div>
        <h1>Bye</h1>
      </div>
  </>
  )
}

return 내부에서 JavaScript값을 사용할 때 {}로 꼭 묶어주자!

4. html과 조금 다른 문법

const App = () => {
  return <div class="hi">Hello React!</div>
}

우리에게 익숙한 위 코드는 콘솔에서 "혹시 HTML을 작성중이신가요?" 라며 오류를 일으킬 것이다. 

JSX 문법에서 class는 className으로 사용해야한다! 

참고로 input에 적용하는 label 태그를 사용할 때 for 속성도 htmlFor로 사용해야한다!