<Fragment>와 <React.Fragment>는 동일한 기능을 하는 React의 두 가지 구문이다. <Fragment>는 import { Fragment } from 'react'를 통해 가져와서 사용하고, 단축 구문인 <>와 </>는 별도의 import 없이 사용할 수 있다.
반면 <React.Fragment>는 import React from 'react'를 통해 React 네임스페이스의 일부로서 사용되며, 이는 보다 명시적인 형태이다. React에서 컴포넌트가 여러 요소를 반환할 때, 부모 요소 없이 여러 자식 요소를 렌더링해야 할 때 <Fragment>나 <React.Fragment>, 또는 <>와 </>를 사용하여 그룹화할 수 있다. 이들은 컴포넌트가 렌더링될 때 실제 DOM에 추가된 마크업을 생성하지 않는다.
// <Fragment> 사용 예시
import React, {Fragment} from 'react';
function MyComponent() {
return (
<Fragment>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</Fragment>
);
}
// 단축 구문 사용 예시 (Fragment를 import하지 않음)
import React from 'react';
function MyComponent() {
return (
<>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</>
);
}
JavaScript
복사
정리하자면, <Fragment>와 <>, </>, 그리고 <React.Fragment> 모두 같은 기능을 하지만, <Fragment>와 <React.Fragment>는 명시적인 방법으로 사용되고, <>와 </>는 JSX의 단축 구문으로 사용된다.
Fragment 있는 버전
import "./App.css";
import Calendar from "./calendar";
function App() {
return (
<>
<Calendar />
</>
);
}
export default App;
JavaScript
복사
위 코드에서 사용된 <>와 </>는 React의 Fragment를 나타낸다. Fragment는 여러 요소를 묶기 위해 사용되지만, 브라우저의 DOM에 별도의 노드를 추가하지 않는다. 이 경우에는 <Calendar /> 컴포넌트 단 하나만 반환하고 있기 때문에 Fragment를 사용할 필요가 없다. 그러나 만약 아래와 같이 컴포넌트가 두 개 이상 반환해야 할 경우 Fragment는 필수적으로 사용해야 한다.
<>
<Calendar />
<OtherComponent />
</>
JavaScript
복사
Fragment 없는 버전
import './App.css';
import Calendar from './Calendar';
function App() {
return (
<Calendar/>
)
}
export default App
JavaScript
복사
위 코드에서는 단일 <Calendar /> 컴포넌트를 반환하고 있다. 이 경우에는 Fragment가 없어도 된다. 이처럼 만약 이 컴포넌트가 유일한 자식 요소라면, Fragment는 불필요하다.
Fragment 사용 이유
Fragment를 이용해서 하나의 요소로 감싸야하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 컴포넌트에 여러 요소가 있다면, 반드시 부모 요소 하나로 감싸야하지만, 컴포넌트에 요소가 하나만 있다면 부모 요소로 감싸지 않아도 된다.
정리하자면, Fragment는 여러 요소를 반환해야 할 때 사용되며, 단일 요소만 반환하는 경우에는 생략해도 된다. 코드의 명확성과 가독성을 위해, 필요하지 않은 경우 Fragment를 생략하는 것이 좋다고 한다.