[React] JSX를 사용하는 이유

React에서 DOM에 html을 그리는 원리 및 코드는 다음과 같다.

ReactDOM.render(
  // <div>테스트</div>
  React.createElement("div",null,"테스트"),
  document.getElementById("root")
);

위의 예제는 div하나만 그리지만 일반적으로 저렇게 간단한 코드를 사용하는 경우는 거의 없다.

예를 들어, <div>태그 안에 여러 태그가 있다고 가정해보자.

ReactDOM.render(
  /*<div>
    <div>
      <h1>테스트1</h1>
      <h1>테스트2</h1>
    </div>
  </div>*/
  React.createElement(
    "div",
    null,
    React.createElement(
      "div",
      null,
      Reat.createElement("h1",null,"테스트1"),
      Reat.createElement("h1",null,"테스트2")
    )
  ),
  document.getElementById("root")
)

만약 위처럼 그러야한다면 React는 지금과 같은 인기를 얻지 못했을것이다.

이렇게 React.createElement로 계속 그리는것은 가독성도 좋지 않고, 매우 귀찮은 작업이 된다.

따라서, 여기서  Babel을 이용한 JSX를 이용한다면 아래와 같이 작성할 수 있게된다.

ReactDOM.render(
  <div>
    <div>
      <h1>테스트1</h1>
      <h1>테스트2</h1>
    </div>
  </div>,
  document.getElementById("root")
)

이게 어떻게 가능한 것일까?

Babel사이트  << 여기를 들어가보면 확인할 수 있다.

Babel

위와 같이 변환이 된다.

따라서 Babel을 이용한 JSX를 사용하게되면 위와 같이 코드가 가독성있게 변환되어 사용하게 된다.

 

※ JSX 문법

• 최상위 요소는 하나
• 최상위 요소 리턴하는 경우, ()로 감싸야함
• 자식을 바로 렌더링 하려면 Fragment를 사용 (<>{children}</>)
• if문은 사용할 수 없다, 다만 삼항 연산자 , &&는 가능
• {}로 묶어서 자바스크립트 표현식 사용 가능 => {js표현식}
• style을 이용해 인라인 스타일링 가능
• class 대신 className을 사용해서 class를 적용할 수 있음
• 자식요소가 있으면 꼭 닫아야함