React Fragment란?

---

React.Fragment는 React version 16에 추가된 기능이다.
DOM에 별도의 노드를 추가하지 않고 여러 자식 Element들을 그룹화할 수 있다.
기본적인 사용법은 아래 코드와 같이 자식 요소들을 감싸주는 형태로 사용한다.

... 
return (
	<React.fragment>
		엘리먼트들
	</React.fragment>
)

그렇다면 div를 사용하게 될 경우와 fragment를 사용하게 될 경우 어떤 차이가 있는지 예제로 비교해 보았다.

1. 사용 예제 코드

---

1) table 태그 구성 시, 여러 td 태그로 이뤄진 Columns라는 컴포넌트를 import하여 사용할 때를 예시로 든다면?

import Columns from './Columns';

function App() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}
export default App;

2-1) Columns 컴포넌트에 td 태그를 div로 감쌀 경우

function Columns() {
  return (
    <div>
      <td>테이블데이터_1</td>
      <td>테이블데이터_2</td>
      <td>테이블데이터_3</td>
    </div>
  );
}
export default Columns;

위 경우, 실제 DOM Tree의 모습은 다음과 같을 것 이다.

<table>
	<tr>
		<div>
			<td>테이블데이터_1</td>
			<td>테이블데이터_2</td>
			<td>테이블데이터_3</td>
		</div>
	</tr>
</table>

table 엘리먼트에 div가 삽입되어 위와 같은 구성은 유효하지 않다.

2-2) Columns 컴포넌트에 td 태그를 Fragment로 감쌀 경우

import React from 'react';

function Columns() {
  return (
    <React.Fragmnet>
      <td>테이블데이터_1</td>
      <td>테이블데이터_2</td>
      <td>테이블데이터_3</td>
    </React.Fragmnet>
  );
}
export default Columns;

위 경우 실제 DOM Tree의 모습은 다음과 같다.

<table>
	<tr>
    	<td>테이블데이터_1</td>
        <td>테이블데이터_2</td>
        <td>테이블데이터_3</td>
	</tr>
</table>

💡 이처럼 Fragment는 실제 DOM에 추가되지 않는다 즉, 불필요한 DOM node가 생성되지 않는 것이다. 따라서 불필요한 메모리 사용을 방지할 수 있을 것이다.

2. 단축 문법(short syntax)

---

Fragment는 빈 태그 <> </>로 단축하여 사용할 수 있다.

▼ 단축 문법 사용 예제 코드

function Columns() {
  return (
    <>
      <td>테이블데이터_1</td>
      <td>테이블데이터_2</td>
    </>
  );
}
export default Columns;

다만, 단축 문법 사용 시 Fragment의 key 값을 설정할 수 없다.

• 예를 들어 map 함수를 사용할 경우, 사용될 요소의 최상위 요소에 key 값을 부여해야 한다. 따라서 이렇게 key 설정이 필요한 경우에는 단축 문법이 아닌 React.Fragment 기본 문법을 사용하면 되겠다.

▼ Fragment key 설정 예제 코드

return (
	<>
		{someData.map((item) => (
			<React.Fragment key={item.id}>
				<h3>{item.title}<h3>
				<span>{item.content}<span>
			</React.Fragment>
		))}
	</>
)

---

Reference.

• https://ko.legacy.reactjs.org/docs/fragments.html