Fragment는 어떤 경우에 사용하나요?

이렇게 답해 보세요 (핵심 답변)

Fragment는 컴포넌트가 여러 자식 엘리먼트를 반환해야 할 때, 불필요한 실제 DOM 래퍼(div 등)를 추가하지 않고 하나로 묶어 주는 기능입니다. 테이블 구조(tr/td)나 Flex·Grid 레이아웃처럼 중간에 여분의 div가 끼어들면 CSS 배치나 웹 접근성 시맨틱이 깨지는 상황에서 특히 유용합니다. 일반적으로는 짧은 <>...</> 문법을 사용하고, 배열 목록을 매핑할 때처럼 그룹 단위에 key를 부여해야 할 때는 명시적인 <Fragment key={item.id}> 문법을 사용합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 실제 브라우저 DOM 트리를 오염시키지 않으면서 JSX의 단일 루트 반환 규칙을 만족시킬 수 있습니다.
2. 여러 형제 요소를 묶어 반복 렌더링할 때도 <Fragment key={...}>를 통해 그룹의 정체성을 안전하게 유지할 수 있습니다.

면접에서 자주 하는 실수

Fragment는 실제 DOM 노드로 렌더링되지 않으므로 className이나 style, DOM 이벤트 리스너를 붙여 스타일 박스로 사용할 수 없습니다.