React Fragment란 무엇이며 왜 사용하나요?

Question

Accepted Answer

컴포넌트는 **단일 루트 요소**를 반환해야 하지만, 그 규칙을 만족시키기 위해 단지 불필요한 래퍼 `

`를 추가하고 싶지 않은 경우가 많습니다(flex/grid 같은 CSS 레이아웃이나 테이블 같은 HTML 구조가 깨질 수 있습니다). **Fragment**는 DOM 노드를 추가하지 **않고** 자식들을 그룹화합니다. ```jsx function TableRow() { return ( <> {/* Fragment — DOM에 추가 요소를 생성하지 않음 */} Name Email ); } ``` 여기서 대신 `

`를 사용하면 유효하지 않은 HTML(`

…`)이 되어 테이블이 깨집니다. Fragment는 두 개의 ``만 render합니다. ## 짧은 구문 vs 전체 구문 ```jsx <>... // 짧은 구문 (가장 흔함) // 전체 구문 — key를 전달해야 할 때 필요 ... ``` 짧은 `<>`는 `key`를 받을 수 없으므로, **fragment 리스트**를 render할 때는 전체 형태를 사용하세요: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## 왜 중요한가 Fragment는 DOM을 깨끗하게 유지하고("래퍼 div 수프" 없이), 시맨틱/레이아웃에 민감한 구조가 깨지는 것을 방지하며, 노드 수를 약간 줄여줍니다 — 이 모든 것이 런타임 비용 없이 이루어집니다.