[React] 멀티 element 생성해보기 (React.Fragment를 쓰는 이유 )

 

html의 여러 태그들을 react로 어떻게 표현할 수 있을까 

<div id="root">
  <h1>h1</h1>
  <h3>h3</h3>
  <h5>h5</h5>
</div>

 

react에서 여러 가지 children 속성을 넣어줄 수 있었다 

그럼 children에 직접 객체를 주입해보면 어떨까 

<script type="text/babel">
  const rootElement = document.getElementById("root");
  const elementReact = (
    <div
      children={[
        React.createElement("h1", null, "h1"),
        React.createElement("h3", null, "h3"),
        React.createElement("h5", null, "h5")
      ]}
    ></div>
  );
  ReactDOM.render(elementReact, rootElement);
</script>

 

root로 태그를 넣어준 것과 동일하게 보이지만 코드 구조가 다르다 

 

 

React에서는 하나의 태그에 children으로 여러 element를  만들어주기 때문에 하나의 요소가 감싸질 수밖에 없다 

그래서 React.Fragment를 이용해서 부모로써 감싸주는 역할만 해주고 실제 html을 작성할 때는 그려지지 않는다.

React.Fragment는 빈태그 로 도 표현할 수 있다. 

 

 

creactElement를 JSX로 변경해보자 

const elementReact = (
    <React.Fragment
      children={[
        React.createElement("h1", null, "h1"),
        React.createElement("h3", null, "h3"),
        React.createElement("h5", null, "h5")
      ]}
    ></React.Fragment>
);
//------------------------
const elementReact = (
    <React.Fragment
      children={[<h1>h1</h1>, <h3>h3</h3>, <h5>h5</h5>]}
    ></React.Fragment>
);
//------------------------
const elementReact = (
    <React.Fragment>
      <h1>h1</h1>
      <h3>h3</h3>
      <h5>h5</h5>
    </React.Fragment>
);
//------------------------
const elementReact = (
    <>
      <h1>h1</h1>
      <h3>h3</h3>
      <h5>h5</h5>
    </>
);