[React] React Fragment 사용이유 및 사용법 (Adjacent JSX elements must be wrapped in an enclosing tag 해결)

목차

1. React.Fragment, Fragment의 차이점은?

2. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야하는가?

 

다음과 같이 <></>를 본 적 있을 것이다. 바로 Fragment이다. 이 친구가 Fragment인지 알게 됨과 동시에 <React.Fragement>를 발견했다.

1. React.Fragment, Fragment의 차이점은?

<Fragment>와 <React.Fragment>는 동일한 기능을 수행하는 React의 기능이다. 

<Fragment>는 JSX에서 단축 구문으로 사용되며, <React.Fragment>는 완전한 형태의 React 요소이다. 

React에서는 컴포넌트에서 여러 요소를 반환하거나, 부모 요소로 감싸지 않고 여러 요소를 렌더링해야 할 때가 있다.
아래 두 예시는 동일한 결과를 생성한다.

<Fragment>와 <React.Fragment>는 컴포넌트가 렌더링될 때 실제 DOM에는 나타나지 않고, 여러 요소를 그룹화하는 역할을 수행한다. JSX에서 <Fragment>는 축약된 표현으로 사용되며, <React.Fragment>는 명시적인 형태로 사용된다. 하지만 기능적으로는 완전히 동일하다.

// <Fragment> 사용 예시
import React, {Fragment} from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </Fragment>
  );
}

// <React.Fragment> 사용 예시
import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </React.Fragment>
  );
}

 

2. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야하는가?

<></>, Fragment를 이용해서 하나의 요소로 감싸야하는 이유는

Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 

 

아래의 예시처럼 컴포넌트에 여러 요소가 있다면, 반드시 부모 요소 하나로 감싸야한다.

(반대로, 컴포넌트에 요소가 하나만 있다면 부모 요소로 감싸지 않아도 된다.)

import React from 'react';
 
function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>잘 작동하니?</h2>
  )
}
 
export default App;

위 예시는 아래과 같은 오류가 날 것이다. 반복해서 말했다싶이 부모 요소로 감싸지지 않았기 때문이다. 

Failed to compile.
./src/App.js
Line 6:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>..</>?

 

결론:

1. <Fragment>와 <React.Fragment>는 동일한 기능

2. <React.Fragment>가 React의 완전한 요소

3. <></> 등 Fragment를 사용하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 DOM 트리 구조로 만들기 위함.