<div>, <>, React.Fragment는 뭐가 다를까?

 

Atomic Design 관련해서 기술 블로그를 보다가 원자 단위의 컴포넌트를 합치는 과정에서 <div> 태그로 감싸는 것을 보았다.

그 코드를 보고, `음, 빈 태그(<></>)로 감싸면 안 되나? 의미상 차이가 큰가?`라는 생각을 하게 되었다. 그리고 '빈 태그가 React.Fragment와 같다고 했던 거 같은데' 하는 생각이 연달아 들었기에 호다닥 <div>, <>, React.Fragment를 살짝 정리해보고 왜 <div>로 감싸게 되었는지 알아보려고 한다.

 

<div>

div 태그는 컨텐츠를 담는 컨테이너로서 쓰인다. 콘텐츠가 보일 영역을 구분하는 태그이다.

 

React.Fragment

React.Fragment는 컴포넌트가 새로운 노드를 추가하지 않고 여러 자식을 그룹화할 수 있게 해 준다.

공식 문서의 설명을 참고하면,

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

테이블 태그 아래 <Colums /> 컴포넌트는 여러 개의 <td /> 태그를 반환해주어야 한다.

하지만 일반적으로 React 컴포넌트는 1개의 자식만을 반환할 수 있기 때문에 다음과 예시처럼 <div> 태그와 같이 다른 태그로 감싸서 return 해주는 것이 일반적이다.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

하지만 이렇게 되면 <tr> 태그 아래에 <div> 태그가 포함되는 형태가 되기 때문에 적절한 형태라고 볼 수 없다.

이러한 형태를 유지하기 위해 React.Fragment를 사용한다.

 

React.Fragment의 축약 문법으로 <></>를 사용한다.

 

축약 문법(<></>)을 사용하는 경우 Fragments에 key를 사용할 수 없기 때문에 상황에 맞는 문법을 사용하는 것이 좋다.

 

결론

그럼 다시 돌아와서, 

내가 궁금했던 것은 Atomic Design에서 원자화되어있는 UI를 조합하여 사용하는 경우에 어떤 태그를 사용하는 것이 적합 한가였다.

 

<div> 태그와 React.Fragments를 비교해 보았을 때,

조합하는 UI를 상위 컴포넌트에 개별로 안착시키는 것이 아니라 하나의 UI로서 사용될 것이기 때문에 컨텐츠의 영역을 의미하는 <div> 태그로 묶어서 사용하는 것이 더 적절하다는 결론이 났다.