React Fragment

---

🧩 Fragment란?

정의

React Fragment는 여러 자식을 불필요한 DOM 요소 없이 묶기 위해 사용하는 가상 그룹 요소다.

Fragment는 화면 구조를 유지하면서도 추가 div를 만들지 않게 해준다.

🧠 왜 사용하는가?

• 불필요한 DOM 노드를 줄일 수 있다.
• CSS 레이아웃이 깨질 가능성을 줄일 수 있다.
• 여러 엘리먼트를 하나의 반환값으로 묶을 수 있다.
• 테이블, 리스트처럼 부모 태그를 추가하기 애매한 곳에서 유용하다.

🛠️ 사용 예시

function App() {
  return (
    <>
      <h1>제목</h1>
      <p>설명</p>
    </>
  );
}

명시적인 Fragment 문법도 사용할 수 있다.

import { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>제목</h1>
      <p>설명</p>
    </Fragment>
  );
}

⚖️ div와의 차이

• div는 실제 DOM 요소를 추가한다.
• Fragment는 DOM에 남지 않는다.
• 단순 그룹화가 목적이면 Fragment가 더 적합하다.

📌 정리

• Fragment는 여러 자식을 묶되 DOM을 늘리지 않기 위한 도구다.
• 불필요한 wrapper를 피하고 싶을 때 자주 쓴다.
• JSX 반환 시 배열 대신 Fragment를 사용하는 경우가 많다.

---

연결문서

• React-Component
• React-JSX
• React-Props
• React-EventHandler