React 16.2 Fragment 문법 적용 후기

배경

프로젝트에서 불필요한 div 래퍼가 너무 많아 DOM 구조가 복잡해지는 문제가 있었다. 특히 리스트 렌더링이나 조건부 렌더링 시 의미 없는 div가 계속 쌓였다.

React 16.2에서 Fragment 단축 문법(<>)이 추가되어 바로 적용해봤다.

적용 전후

Before

render() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
}

After

render() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

제약사항

단축 문법은 key나 attributes를 받을 수 없다. 리스트 렌더링에서는 여전히 <React.Fragment>를 써야 했다.

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

결과

• DevTools에서 DOM 트리가 훨씬 깔끔해짐
• CSS 선택자 작성 시 불필요한 depth 고려 안 해도 됨
• Babel 7.0.0-beta로 업그레이드 필요 (JSX Fragment 지원)

프로젝트 전반에 적용하니 컴포넌트 구조가 한결 명확해졌다. 특히 table이나 dl 같은 특정 구조를 요구하는 HTML 요소 다룰 때 유용했다.