React.Fragment란

React의 엘리먼트들은 반드시 단 하나의 최상위 태그로 묶여있어야 한다.

div 태그로 주로 묶어주는데 그렇지 않으면 SyntaxError가 발생하기 때문이다.

하지만 의미 없이 엘리먼트들을 감싸기 위해서 div태그를 사용하는 것은 불필요하다. css로 스타일링하기에도 번거롭고, table처럼 정해진 구조를 따라야 하는 태그를 사용할 때 콘솔 에러가 뜰 수 있기 때문이다.

그래서 리액트에서 제공하는 fragment를 사용하면 DOM에 별도의 Node를 추가하지 않고도 엘리먼트들을 묶어줄 수 있다.

React.Fragment 사용법

최상단에 <React.Fragment></React.Fragment>로 감싸주거나, <></> 이렇게 감싸주면 된다.

import React from 'react';

const Component = () => {
  return (
      <React.Fragment>
    	<h1>hello, React</h1>
    	<p>Nice to meet you</p>
      </React.Fragment>
  );
}

import React from 'react';

const Component = () => {
  return (
      <>
    	<h1>hello, React</h1>
    	<p>Nice to meet you</p>
      </>
  );
};

🔑 map 사용시 key 전달할 때

만약 table 구조로 컴포넌트를 만들 때, 한 컬럼을 컴포넌트로 만드는 과정에서, 엘리먼트를 감쌀때 별도의 node로 감싼다면 table 태그 사용 시 에러가 발생할 수 있다.

import React from 'react';
import Column from './Column';

function App() {
  return (
  	<div classname='App'>
    	<table>
    	  <tbody>
    		<tr>
    		  <Column />
    		</tr>
            <tr>		
    		  <Column />
    		</tr>
          </tbody>
    	</table>
    </div>
  )
}

그럴 때, div태그로 감싸는 것이 아닌 React.Fragment 를 사용하는 것이 좋다.

import React from 'react';

const Component = (props) => {
  const dataList = ['국어','영어','수학'];
  return (
	<>
      {
    	dataList.map((data, idx) => {
    	  <React.Fragment key={idx}>
        	<td>{data}</td>
    		<td>{data}</td>
    	  </React.Fragment>
        });
      }  
    </>
  )
};

map 함수를 사용하면 key 에러가 나기 때문에 key 값을 넣어줘야 한다.
하지만 <></> 로 감싸주면 key 속성을 적용할 수 없기 때문에
<React.Fragment></React.Fragment> 로 감싸주면 key를 넣을 수 있다.

아직 나는 ul 태그 안에 li 태그를 map 해본 경험밖에 없지만, 만약 이런 경우가 생긴다면 적용해볼 수 있을 것 같다.