React : Fragment 관련 정리

<> </>

• <> </>는 React Fragment의 짧은 문법
• 여러 요소를 감쌀 때 불필요한 <div> 없이 그룹화 가능
• React.Fragment를 사용하면 key 같은 속성 추가 가능

 

<> </> 와 <div> </div> 비교

- 사용자가 보는 화면(UI)에서는 동일하게 동작

- 하지만 개발자 도구(Elements 탭)에서 보면 차이가 난다.

 

1) Fragment 사용

<>
  <h1>안녕!</h1>
  <p>React Fragment를 사용 중이야.</p>
</>

📌 렌더링된 HTML

<h1>안녕!</h1>
<p>React Fragment를 사용 중이야.</p>

→ <h1>과 <p>만 남고 불필요한 부모 요소 없음!

 

2) div 사용

<div>
  <h1>안녕!</h1>
  <p>React Fragment를 사용 중이야.</p>
</div>

📌 렌더링된 HTML

<div>
  <h1>안녕!</h1>
  <p>React Fragment를 사용 중이야.</p>
</div>

→ <div>가 추가됨.

 

 

언제 Fragment를 써야 할까?

1. 불필요한 <div> 추가를 피하고 싶을 때 → 예를 들어, CSS에서 display: flex;를 적용할 때 불필요한 <div>이 있으면 레이아웃이 깨질 수 있다.
2. 리스트를 렌더링할 때 key 속성이 필요할 때 (React.Fragment)
3. <> {items.map((item, index) => ( <React.Fragment key={index}> <h2>{item}</h2> <p>맛있어!</p> </React.Fragment> ))} </>
4. 컴포넌트가 여러 요소를 반환해야 하지만 부모 요소가 필요 없는 경우

 

Fragment 짧은 문법의 한계 : 리스트 렌더링에서 key가 필요한 경우

🚨 Fragment 없이 리스트를 렌더링할 경우, 만약 리스트 항목이 여러 개의 요소를 포함한다면 오류 발생

function ItemList() {
  const items = ["사과", "바나나", "포도"];

  return (
    <>
      {items.map((item, index) => (
        <>  // Fragment 사용했지만 key 속성 없음 (오류 발생!)
          <h2>{item}</h2>
          <p>맛있어!</p>
        </>
      ))}
    </>
  );
}

Warning: Each child in a list should have a unique "key" prop.

👉 <> </> (짧은 문법)으로 Fragment를 사용하면 key 속성을 추가할 수 없기 때문에 React가 경고를 띄움!

 

✅ React.Fragment 사용하여 해결

function ItemList() {
  const items = ["사과", "바나나", "포도"];

  return (
    <>
      {items.map((item, index) => (
        <React.Fragment key={index}>  // key 속성을 가진 Fragment 사용
          <h2>{item}</h2>
          <p>맛있어!</p>
        </React.Fragment>
      ))}
    </>
  );
}

 

👉 경고 사라짐