[React] Fragment

Fragment

불필요한 DOM 노드를 추가하지 않고 여러 개의 엘리먼트 묶기

리액트 컴포넌트는 기본적으로 하나의 부모 엘리먼트만 반환해야 한다는 규칙이 있다. 그래서 보통 <div> 태그로 감싸주곤 한다.

하지만 불필요하게 <div>를 계속 사용하면 다음과 같은 문제가 생길 수 있다.

• DOM 트리 복잡성 증가
  • DOM 트리가 깊고 복잡해져서 렌더링 성능에 미세한 영향을 줄 수 있고, 개발자 도구로 코드를 분석하기 까다로워짐
• CSS 스타일링 문제
  • 의도치 않은 CSS 스타일 상속이나 레이아웃 깨짐 현상 발생

이 문제들을 해결하기 위해 프래그먼트를 사용한다.

사용법

1. 단축 문법 <> 사용

• 가장 흔하게 사용한다.

const MyComponent = () => {
  return (
    <>
      <h1>안녕하세요!</h1>
      <p>리액트 프래그먼트입니다.</p>
    </>
  );
};

2. <React.Fragment> 태그 사용

• key prop이 필요한 경우 (e.g. 배열을 렌더링할 때) 이 방식을 사용해야 한다.

const MyComponent = () => {
  return (
    <React.Fragment>
      <h1>안녕하세요!</h1>
      <p>리액트 프래그먼트입니다.</p>
    </React.Fragment>
  );
};