[React] 02. JSX 사용하기

# JSX

JSX는 자바스크립트에 확장 구문으로, xml과 비슷합니다. JSX를 사용하면 가독성이 높고 좀 더 코드를 쉽게 작성할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello world!!</h1>,
  document.getElementById('root')
);

 

JSX를 사용할 때 여러개의 컴포넌트들이 존재한다면  반드시 부모 요소로 감싸주어야 합니다.

아래 코드에서는 부모요소인 <div> 안에 <h1>과 <h2>를 감싸준 형태입니다. 

function App() {
  return (
    <div className="App">
      <h1>안녕하세요!</h1>
      <h2>송우든입니다</h2>
    </div>
  );
}

 

다음 코드와 같이 부모요소로 감싸주지 않을 경우, 아래와 같은 에러가 발생합니다!

SyntaxError
/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment

 

또한, <div>나 <span> 태그를 부모 요소로 사용하고 싶지 않을 때에는 Fragment<></>를 사용할 수 있습니다.

function App() {
  return (
      <>
      <h1>안녕하세요!</h1>
      <h2>송우든입니다</h2>
      </>
  );
}

 

JSX에서는 자바스크립트의 표현식을 사용할 수 있는데, JSX내부 코드를 {}로 감싸서 사용합니다.

function App() {

  const user = {
    name : "송우든",
    age : 24};

  return (
      <>
      <h1>안녕하세요!</h1>
      <h2>{user.name}, {user.age}살입니다</h2>
      </>
  );
}
// 안녕하세요!
// 송우든, 24살입니다

 

여기서 주의할 점은 JSX 내부 자바스크립트 표현식에서 if문을 사용할 수 없습니다. 

JSX 내부에서 조건부 연산이 필요하다면 아래와 같이 삼항연산자를 사용하거나 JSX 밖에서 값을 처리해서 사용합니다.

function App() {

  const user = {
    name : "송우든",
    age : 24};

  return (
      <>
      {(user.name === "송우든") && (user.age === 24) ? 
      (<h1> 등록된 사용자입니다.</h1>) : (<h1> 미등록 사용자입니다.</h1>)
      }
      </>
  );
}

// 등록된 사용자입니다.

 

마지막으로 JSX에서는 태그를 꼭 닫아야 합니다. 

function App() {
  return (
      
      <>
      <h1>안녕하세요!</h1>
      <h2>송우든입니다!</h2>
      <br>
      </>
  );
}

 

다음과 같이 <br> 태그를 사용한다면 아래와 같은 에러 메시지를 확인할 수 있습니다.

SyntaxError
/src/App.js: Unterminated JSX contents

JSX에서는 꼭 </br>처럼 태그를 닫아주거나 <br />과 같이 self-closing태그를 사용하여야 합니다.