[25] react 의 JSX

궁금증

리액트 create react app 의 JSX 문법은 개발자가 보기편하게 만들어준다.

근데 가끔은 리액트 컴포넌트를 보면 return 밑으로 작성된 JSX 의 코드가 원래는 어떻게 동작할까 ?

라는 의문이 들때가있다.

또한 상위요소가 필수적으로 하나가 필요해야되는 이유가 무엇인지 궁금했고,
원래는 어떤 코드였고 JSX 를통해서 보기좋게 변하게됬는지 ?

간단하게 알아보자.

먼저 기본적으로 간단한 컴포넌트를 보자.

function Example() {
  return (
    <div>
        <h2>hi</h2>
        <div price = {price} >$1000</div>
    </div>
  );
}

컴포넌트에 상위div 태그 안에 h2, div 를 나타내고있다.

JSX 를 통해 상당히 개발자가 보기 편한대 아주 이전의 리액트에서는 다르게 표시했었다.

import React from 'react';

function Example(props) {
  return React.createElement("div",{} 
            React.createElement("h2", {}, "hi"),
            React.createElement("div", {price : price}, "$1000")
);

}

먼저 상위에 react를 임포트해야된다. import 한 react 를 사용해서

createElement 메소드를 이용하여 작성해야된다.

이것은 세가지 인자를 갖게 되는데 ( 생성해야하는 요소 , 요소를 설정하는 객체 , 태그안에 children )

을 갖게된다. 이러한 규칙을 통해서 변환된 코드를 보자

하나의 상위 createElement 를 생성한뒤 그 생성한 3번째 인자

즉 태그안에 들어갈 children 들을 다시 createElement 를 통해서 생성한다.

이러한 번거로운 작업을 통해서 작성해야되고 여기서 작성하면서
왜 JSX 코드를작성할때 형제요소들을 추가할수없고 꼭 상위 요소가 있어야하는지에대해 알수가있다.

왜냐면 createElement의 가 한개이상의 자식을가질수있는 요소를 생성하기때문이다

참고

https://ko.reactjs.org/docs/jsx-in-depth.html