React 16.2의 Fragment로 불필요한 div 줄이기

문제 상황

어드민 테이블 컴포넌트를 작성하다가 tr 안에 여러 td를 반환하는 컴포넌트를 만들어야 했다. 기존에는 불필요한 div로 감싸야 했고, 이로 인해 테이블 레이아웃이 깨지는 문제가 있었다.

// 기존 방식 - div 때문에 테이블 깨짐
class TableRow extends Component {
  render() {
    return (
      <div>
        <td>{this.props.name}</td>
        <td>{this.props.email}</td>
      </div>
    );
  }
}

배열로 반환하는 방법도 있었지만 각 요소에 key를 붙여야 해서 번거로웠다.

Fragment 적용

React 16.2부터 Fragment가 정식 지원되어 바로 적용했다.

import React, { Component, Fragment } from 'react';

class TableRow extends Component {
  render() {
    return (
      <Fragment>
        <td>{this.props.name}</td>
        <td>{this.props.email}</td>
      </Fragment>
    );
  }
}

단축 문법 <></>도 지원하지만 Babel 설정이 필요해서 명시적인 Fragment를 사용했다. 나중에 Babel 7로 업그레이드하면 단축 문법을 쓸 예정이다.

결과

• 불필요한 wrapper 제거로 DOM 구조 개선
• CSS 선택자가 단순해짐
• 테이블, 리스트 등 구조적 마크업에서 특히 유용

조건부 렌더링이 많은 컴포넌트에서도 활용도가 높을 것 같다.