[React] Fragment

❓ 정의

- Fragment는 React에서 여러 JSX 요소를 하나의 부모 요소로 감싸야 할 때, 추가적인 DOM 노드를 생성하지 않고 그룹화할 수 있도록 도와주는 컴포넌트다.

- 일반적으로 JSX 문법에서는 하나의 부모 요소만 반환해야 하는 제약이 있는데, Fragment는 이러한 제약을 해결하면서도 DOM 구조를 간결하게 유지하고 성능을 최적화하는 데 도움을 준다.

- React 개발자들이 컴포넌트를 설계할 때 불필요한 <div> 태그를 제거하고, 가독성과 유지보수성을 높이는 데 유용하다.

▶ 기본 사용 예시

import React from "react";

function App() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
  );
}

단축 문법(<> </>)을 사용하면 더 간결하게 작성할 수 있다.

function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

---

❗ 사용이유

✅ 불필요한 DOM 노드 제거

- JSX 문법에서는 여러 요소를 반환하려면 <div>와 같은 부모 태그로 감싸야 한다. 하지만 이러한 태그는 실제 DOM에 추가되어 성능 저하나 CSS 스타일링 충돌을 유발할 수 있다. Fragment는 이러한 문제를 해결하며, 렌더링 결과에 영향을 미치지 않는다.

✅ 코드 가독성과 유지보수성 향상

- Fragment를 사용하면 불필요한 부모 태그 없이도 여러 요소를 그룹화할 수 있어 코드가 간결해진다. 이는 특히 복잡한 컴포넌트나 리스트 렌더링에서 가독성과 유지보수성을 크게 향상시킨다.

---

💥 주의

1️⃣ 속성 적용 불가

- Fragment는 가상의 컨테이너 역할만 하므로, className이나 style 같은 속성을 적용할 수 없다. 만약 속성이 필요하다면 <div>나 다른 HTML 태그를 사용해야 한다.

2️⃣ 단축 문법의 제한

- 단축 문법(<> </>)은 key 속성을 지원하지 않는다. 따라서 리스트 렌더링에서 고유한 key가 필요한 경우에는 반드시 React.Fragment를 사용해야 한다.

---

💠 예시

1️⃣ 여러 요소 반환

- 컴포넌트에서 여러 요소를 반환해야 할 때, 불필요한 <div> 태그 대신 Fragment를 사용할 수 있다.

function App() {
  return (
    <>
      <header>Header</header>
      <main>Main Content</main>
      <footer>Footer</footer>
    </>
  );
}

2️⃣ 리스트 렌더링

- 리스트 렌더링에서 각 항목을 그룹화하면서도 추가적인 DOM 노드를 생성하지 않으려면 Fragment를 사용할 수 있다.

function List({ items }) {
  return (
    <>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </>
  );
}

3️⃣ 조건부 렌더링

- 조건부 렌더링에서도 Fragment를 사용하면 불필요한 부모 태그 생성을 방지할 수 있다.

function ConditionalRender({ isLoggedIn }) {
  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </>
  );
}

// 렌더링 결과
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>

4️⃣ 스타일 충돌 방지

- 불필요한 <div> 태그로 인해 CSS 스타일이 꼬이는 것을 방지할 수 있다. Fragment는 스타일 충돌을 최소화하면서도 JSX 문법의 제약을 해결한다.