React.Fragment

React에서 JSX로 코드를 작성하면 항상 Root Element로 래핑된 형태로 return해야하는 규칙을 따라야 한다.

// O
const Todo = () => {
	return (
		<div>
			<h1>Title</h1>
			<p>Content</p>
		</div>
	)
}

// X
const Todo = () => {
	return (
			<h1>Title</h1>
			<p>Content</p>
	)
}

이런 규칙 때문에 굳이 <div>나 커스텀한 Wrapper로 래핑하지 않아도 되는 경우에도 쓸데없은 Element들이 추가되게 된다. → <div> Soup

<div> Soup

<div> Soup는 사이즈가 큰 앱에서 React나 JSX의 문법상 규칙을 위해서 DOM 구조적으로 불필요한 <div\>나 다른 Element들이 추가되는 현상을 말한다.

<div> Soup는 React에서 제공하는 Fragment라는 것을 활용해서 순수하게 JSX 규칙을 위해 래핑을 사용하는 것을 방지할 수 있다.

React.Fragment

React.Fragment는 Wrapper Node없이 여러 Elements를 JSX에서 사용할 수 있게 해준다.

const Todo = () => {
	return (
		<div>
			<h1>Title</h1>
			<p>Content</p>
		<div/>
	)
}

import React from 'react';

const Todo = () => {
	return (
		<React.Fragment>
			<h1>Title</h1>
			<p>Content</p>
		<React.Fragment/>
	)
}

<div\>로 래핑하는 경우에는 실제 브라우저 DOM에 Wrapping Element가 반영되었지만, React.Fragment를 사용하면 Wraping Element 없이 여러 Element를 랜더링할 수 있게 되었다.

개인적인 호기심

💡 어떻게 Fragments를 Wrapper없이 화면에 띄울까.

CRA에 TypeScript 템플릿을 적용한 React 프로젝트에서 React.Fragment를 찾아보았다.

다른 파일에서는 검색결과가 나오지 않았고, index.d.ts 파일에서 ReactFragment라는 타입을 확인할 수 있었다.

// node_modules/@types/react/ts5.0/index.d.ts
type ReactFragment = Iterable<ReactNode>;
...
type ReactNode =
        | ReactElement
        | string
        | number
        | ReactFragment
        | ReactPortal
        | boolean
        | null
        | undefined
        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES];

ReactFragment는 Iterable한 ReactNode를 의미하는 것 같다.

Iterable하다는 것은 순회가 가능하다는 것을 의미하기 때문에 Fragment로 래핑한 여러 Element를 순회하면서 화면에 랜더링하는 게 아닐까 하는 생각을 해보았다.

Reference

https://react.dev/reference/react/Fragment