React 16.2 Fragment 적용기

문제 상황

컴포넌트에서 여러 엘리먼트를 반환할 때 불필요한 div로 감싸야 했다. 특히 테이블 구조나 Flexbox 레이아웃에서 예상치 못한 스타일 깨짐이 발생했다.

render() {
  return (
    <div> {/* 불필요한 래퍼 */}
      <td>Name</td>
      <td>Value</td>
    </div>
  );
}

Fragment 적용

React 16.2부터 정식 지원되는 Fragment를 도입했다.

import React, { Fragment } from 'react';

render() {
  return (
    <Fragment>
      <td>Name</td>
      <td>Value</td>
    </Fragment>
  );
}

단축 문법도 사용 가능하지만, Babel 설정이 필요해서 명시적 Fragment를 사용했다.

적용 결과

• 200여 개 컴포넌트에서 불필요한 div 제거
• 테이블 렌더링 이슈 해결
• DOM 노드 수 약 15% 감소
• CSS 선택자 수정 없이 레이아웃 정상화

특히 리스트 컴포넌트에서 key prop을 Fragment에 직접 전달할 수 있어 map 처리가 깔끔해졌다.

items.map(item => (
  <Fragment key={item.id}>
    <dt>{item.title}</dt>
    <dd>{item.description}</dd>
  </Fragment>
))

간단한 변경이지만 마크업 품질이 확실히 개선됐다.