JSX

const element = <div>안녕하세요!</div>;

위의 문법은 문자열 또는 html도 아니다.JSX라고 부르며 자바스크립트를 확장한 문법이다.
쉽게 말해서 리액트에서 생김새를 정의할 때 사용한다.

이러한 JSX 문법을 사용할때 지켜야할 몇가지 규칙이 있다. 이 규칙에 대해서 알아보자.

JSX 문법 규칙

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

   JSX에서 태그는 항상 꼭 닫혀야하고 그렇지 않으면 에러가 발생한다. 태그 사이에 어떠한 내용이 없을 경우에는 self closing 태그를 사용하여 닫아준다. 아래의 코드 기준으로 Hello 컴포넌트가 self closing 태그로 사용되었다.

import React from 'react';
import Hello from './Hello';

const App = () => {
  return (
    <div>
      <p>안녕하세요</p>
      <Hello />
    </div>
  )
}

2. 두개 이상의 태그는 항상 감싸져야한다.

   JSX에서 2개 이상의 태그를 사용할 경우 항상 감싸주는 태그가 필요하다.
   그냥 div태그로 감싸줄 수도 있고 또는 Fragment를 사용해 불필요한 div태그 생성을 방지할 수도 있다.

import React from 'react';

const App = () => {
  return (
    <>
      <p>안녕하세요.</p>
      <div>반갑습니다.</div>
    </>
  )
}

3. 표현식 포함하기

   JSX에서는 {} 중괄호 안에 자바스크립트 표현식을 넣을수 있다.

import React from 'react';

const App = () => {
  return (
    <>
      <p>JS표현식을 넣어줍니다. {1+1}</p>
      <div>{'반갑습니다'}</div>
    </>
  )
}

4. 주석 추가하기

   JSX에서 주석을 추가할 때는 표현식을 넣을 때 처럼 {} 중괄호 안에 /**/을 넣어준다.

import React from 'react';

const App = () => {
  return (
    <>
      {/*여기에 주석을 추가합니다.*/}
      <p>JS표현식을 넣어줍니다. {1+1}</p>
      <div>{'반갑습니다'}</div>
    </>
  )
}