[React] React Fragment 어디다 쓰고, 왜 쓸까?

React로 본격적인 개발은 처음인 내가 가장 많이 마주했던 에러 중 하나는 JSX 엘리먼트가 하나의 태그로 묶어서 return되어야 한다는 에러였다. 이를 위해 의미 없는 <div>태그 등으로 묶어 return을 해주고는 했다는데, React v16에 추가된 'React Fragment'가 이를 해결해준다고 한다. React Fragment, 어디에 쓰고, 왜 써야 하는 걸까? 

React fragment란?

Fragment는 React 컴포넌트에 추가적인 DOM node를 추가하지 않고서도 복수의 element들을 더할 수 있게 해주는 syntax다.

 

JSX의 규칙에 따르면

const App = () => {
  return (
    <h1>This is heading1 text</h1>
    <p>This is paragraph text</p>
  );
}

export default App

이와 같이 여러 개의 element를 추가하려고 하면 Syntax Error가 발생하며, 따라서 최상단에 하나의 <div>태그로 감싸주면 문제가 해결되곤 한다. 

 

React Fragment는 React v16에 추가된 최신 기능으로, 의미 없는 태그 대신 최상단 태그의 역할을 해준다. 의미 없는 <div> 태그를 쓰는 것이 좋지 않은 이유는 DOM tree에 쓸모 없는 추가 노드를 추가하는 일일 뿐만 아니라, 코드에 변칙을 추가하는 일이 될 수도 있기 때문이다. 예를 들어 ul > li로 이어지는 구조나, table > tr > td로 이어지는 구조를 파괴할 수 있다.

 

왜 React component는 하나의 element만을 반환할 수 있나?

JSX 파일 내부 element들이 하나의 DOM tree로 되어 있어야 브라우저가 읽기에 용이하기 때문이다.

링크

GitHub - HerrineKim/TIL: 내가 배운 모든 것들 (2022~)

 

React Fragment vs <div> 태그

기존에 하던 

 

 

https://reactjs-kr.firebaseapp.com/docs/fragments.html

Fragments – React

https://blog.logrocket.com/understanding-react-fragments/

Understanding React fragments - LogRocket Blog