[React] React.Fragment

React.Fragment

<React.Fragment></React.Fragment>

<></>

• React 컴포넌트들은 여러개의 element들을 return함
• element들은 반드시 단 하나의 최상위 태그로 묶여있어야 함
• 보통 div태그 사용
• React.Fragment를 사용하면 실제 DOM에 별도의 NODE를 추가하지 않고도 element들을 묶어줄 수 있음

FragmentPage

import React from "react";
import FragmentComponent from "../components/FragmentComponent";

function FragmentPage() {
  return (
    <div className="Fragment">
      <FragmentComponent />
    </div>
  );
}

export default FragmentPage;

FragmentComponent

import React from "react";

const FragmentComponent = () => {
  return (
    <div>
      <h1>안녕하십니까 리액트~</h1>
      <p>반갑습니다 여러분</p>
    </div>
  );
};

export default FragmentComponent;

• 위 코드처럼 div를 사용해서 묶어줘도 되지만
  DOM 구조 안에 의미가 없는 div태그로 묶여있는것이 많아진다면
  DOM 구조도 복잡해지고 CSS로 스타일링할때도 번거로움
  - 해결방법 : React.Fragment를 사용하자

---

React.Fragment 사용방법

1. React import하기
2. div태그를 React.Fragment로 바꿔주기

• 의미없는 div가 사라짐

또 다른 사용 방법

---

유용한 상황

1. CSS로 스타일링할 때

• 특히 flexbox 등 레이아웃과 관련된 스타일링 할 때 좋음

FragmentPage

import React from "react";
import FragmentComponent from "../components/FragmentComponent";
import "../FragmentPage.css";

function FragmentPage() {
  return (
    <div className="FragmentPage">
      <FragmentComponent />
    </div>
  );
}

export default FragmentPage;

FragmentPage.css

.FragmentPage {
  display: flex;
  border: 1px solid orange;
  justify-content: space-between;
}

h1 {
  background-color: yellowgreen;
}

p {
  background-color: pink;
}

React.Fragment 태그로 묶었을 때

import React from "react";

const FragmentComponent = () => {
  return (
    <React.Fragment>
      <h1>안녕하십니까 리액트~</h1>
      <p>반갑습니다 여러분</p>
    </React.Fragment>
  );
};

export default FragmentComponent;

div 태그로 묶었을 때

import React from "react";

const FragmentComponent = () => {
  return (
    <div>
      <h1>안녕하십니까 리액트~</h1>
      <p>반갑습니다 여러분</p>
    </div>
  );
};

export default FragmentComponent;

• div로 묶으면 CSS가 망가짐

2. 테이블처럼 정해진 구조를 가지고 있는 태그 사용할 때

1. 테이블 예시

FragmentPage2

import React from "react";
import "../FragmentPage2.css";

function FragmentPage2() {
  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>브런치먹기</td>
            <td>빨래하기</td>
            <td>계획세우기</td>
          </tr>
          <tr>
            <td>브런치먹기</td>
            <td>빨래하기</td>
            <td>계획세우기</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default FragmentPage2;

FragmentPage2.css

table {
  border: 1px solid black;
}

td {
  border: 1px solid black;
  padding: 5px;
}

• 테이블에서 같은 구조 반복되는 부분 컴포넌트로 만들어주기

Column

import React from "react";

const Column = (props) => {
  return (
    <div>
      <td>브런치먹기</td>
      <td>빨래하기</td>
      <td>계획세우기</td>
    </div>
  );
};

export default Column;

FragmentPage2

import React from "react";
import Column from "../components/Column";
import "../FragmentPage2.css";

function FragmentPage2() {
  return (
    <div className="FragmentPage2">
      <table>
        <tbody>
          <tr>
            <Column />
          </tr>
          <tr>
            <Column />
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default FragmentPage2;

• td는 div의 자녀가 될 수 없다는 오류 발생

Column 수정

import React from "react";

const Column = (props) => {
  return (
    <>
      <td>브런치먹기</td>
      <td>빨래하기</td>
      <td>계획세우기</td>
    </>
  );
};

export default Column;

• 오류 발생하지 않음

2. 배열 예시

• 배열의 경우 key가 필요하기 때문에 <> </> 로는 사용이 불가하고
  이렇게 사용해줘야 함

        <React.Fragment key={idx}>
          <td>{todo}</td>
        </React.Fragment>