TIL ( 6일차 2022-05-24 )

Fragment란?

React에서는 return 문 안에 반드시 하나의 최상위 태그가 있어야 한다. 이는 JSX 문법에서 하나의 컴포넌트만을 리턴할 수 있기 때문이다.

React v16.2.0 버전에서 추가되었다.

Fragment 사용 이유

1. 불필요한 태그를 없앨 수 있다.

import React from "react";
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <Table />
        </tr>
      </table>
    </div>
  );
}
function Table() {
  return (
    <div className="Table">
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}
export default App;

Table 컴포넌트를 렌더링하기 위해서는 <div className="Table"></div> 로 묶어주어야 return이 가능하다.

이렇게 되면 최종적으로 Table 컴포넌트는

<table>
    <tr>
      <div className="Table">
          <td>Hello</td>
          <td>World</td>
      </div>
    </tr>
</table>

의미 없는 div 가 추가 된다.

하지만 Fragment를 사용하게 되면

import React { Fragment } from "react";
function Table() {
  return (
    <Fragment>       {/* <> 대신 <Fragment> 라고 명시할 수 있다. */}
      <td>Hello</td>
      <td>World</td>
    </Fragment>      {/* </> 대신 </Fragment> 라고 명시할 수 있다. */}
  );
}

이렇게 사용할 수 있고 HTML에 반영되는 Table 컴포넌트는 의미 없는 div가 삭제된다.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

1. map 함수로 여러 개의 컴포넌트를 만들 때, key 의 속성값을 Fragment에 넣어줄 수 있다.

   주의할 점은 Fragment에 key 속성을 포함할 경우, Fragment 키워드를 꼭 넣어줘야 한다는 것이다. 그냥 <>,</>는 쓸 수 없다.

React 공식 홈페이지

import React { Fragment } from "react";
function Test(props) {
  return (
    <div>
      {props.items.map(item => (
        // map을 사용할 때 `key`가 없으면 key warning을 발생
				// 이는 Array.from을 사용할 때도 마찬가지
        <Fragment key={item.id}>
          <p>{item.term}</p>
          <p>{item.description}</p>
        </Fragment>
      ))}
    </div>
  );
}

Fragment를 잘 사용한다면 DOM 요소를 최적화 할 수 있을 것 같다.

이러한 문법이 있다는 것만 알고 나중에 코드 간결화나 성능 개선을 위해 고려해볼만한 사항이다.