React(리액트): JSX 규칙 (태그, 중괄호{}, 주석)

JSX의 기본 규칙 알아보기

JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 얼핏 보기에는 HTML처럼 생겼지만 사실 

자바스크립트이다. 'BABEL(바벨)'이라는 도구를 사용해서 XML 형태의 코드가 자바스크립트로 변환이 되는 것이다.

BABEL이라는 도구가 JSX라는 문법을 사용해서 XML형태로 선언하면 이걸 자바스크립트로 변환해준다.

 

이렇게 JSX로 작성한 코드가 자바스크립트로 제대로 변환되려면 준수해야할 몇 가지 규칙이 있다.

지금부터 그 규칙들을 알아보자.

 

첫 번째, 태그는 꼭 닫혀있어야 한다. 

import "./App.css";
import Hello from "./Hello";
function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <div
    </div>
  );
}

export default App;

다음과 같이 9번째 줄에서 태그를 닫아주지 않으면 에러가 발생한다. 

HTML에서는 <input>이나 <br>태그는 닫지 않고 하지만 리액트에서는 이와 같은 태그들도 닫아주어야 한다.

만약 태그 사이에 아무것도 안 들어가는 경우에는 '셀프 클로징 태그'를 사용하면 된다. <Hello /> 태그가 

셀프 클로징 태그를 사용한 예시이다. 열고 바로 닫히는 태그라고 이해하면 된다.

 

두 번째, 두 개 이상의 태그는 꼭 하나의 태그로 감싸져 있어야 한다. 

두개 이상의 태그를 감싸는 태그가 <div></div>될 수도 있고 그 밖에 다른 태그도 가능하다. 

만약 굳이 어떠한 HTML element로 감싸고 싶지 않다고 하면 그림과 같이 비어있는 태그(Fragment 태그)를 사용하면

된다. Fragment 태그는 아무런 역할도 하지 않고 이 규칙을 지켜준다.

 

세 번째, 자바스크립트 값을 JSX 내부에서 사용할 때는 중괄호로 감싸주어야 한다.

다음과 같이 자바스크립트 값을 JSX 내부에서 사용하려면 {name}과 같이 중괄호로 감싸주어야 한다.

 

네 번째, JSX 내부에서 스타일을 사용하게 될 때는 객체 형태로 만들어 넣어주어야 작동하고

           'class'가 아닌 'className'을 사용한다.

 

다섯 번째, 주석 작성 방법

주석을 작성하는 위치에 따라 주석 사용방법이 다르다.