React Fragments

React Fragments

리액트 v16.2부터 'Fragments' 기능을 지원합니다. 렌더링을 할 때 단일 요소만 다룰 수 있음로 불필요한 DOM을 삽입하는 경우가 많았습니다. 그러나 Fragments를 사용하면 여러 개의 요소를 직접 화면에 표시할 수 있습니다. React.Fragment로 감싼 부분은 DOM은 출력하지 않고 자식 요소만 렌더링합니다. 그럼 코드를 볼까요. 먼저 Fragment를 적용하지 않은 것을 작성하고, Fragment를 적용한 것을 작성하여 비교해보도록 하겠습니다.

Fragment 적용하지 않은 컴포넌트

import React from 'react';

const Hello = () => {

return (

<div>

<h1>Hello</h1>

<p>World</p>

<p>!</p>

</div>

);

};

export default Hello;

App.js

import React from 'react';

import Hello from './Fragments/Hello';

const App = () => {

return (

<div id="App">

<Hello />

</div>

);

};

export default App;

확실한 비교를 위해 App 컴포넌트를 감싸는 div에 id값으로 App을 주었습니다.

실행화면입니다. App 컴포넌트 안에 Hello 컴포넌트가 <div>태그로 DOM을 형성하였습니다. 이 <div>로 감싸 부분이 불필요하다면 Fragments를 사용하면 됩니다.

Fragments를 적용한 컴포넌트

import React, {Fragment} from 'react';

const Hello = () => {

return (

<Fragment>

<h1>Hello</h1>

<p>World</p>

<p>!</p>

</Fragment>

);

};

export default Hello;

작성법은 간단합니다. Fragment를 위와 같이 import하고, 보통 컴포넌트를 감싸는 <div> ... </div> 태그를 <Fragment> ... </Fragment>로 바꿔주면 됩니다. App.js는 달라진 부분이 없기에 바로 실행하겠습니다.

차이점이 보이시나요? Fragments를 적용하기 전에는 Hello 컴포넌트가 <div> ... </div>로 감싸져 있었습니다. 하지만 Fragments를 적용한 후에는 <div> ... </div>가 보이지 않습니다. 즉, DOM을 출력하지 않았습니다. 깔끔하지 않나요?

이 뿐만 아니라 JSX에서도 Fragments를 지원하는 구문이 추가되었습니다. 다음 예제와 같이 빈 태그로 실제 DOM 요소를 화면에 표시하지 않는다고 표현합니다(Babel에서는 v7 이후 지원하므로 트랜스파일할 땐 버전에 주의).

빈 태그<> 로 표시

import React from 'react';

const Hello = () => {

return (

<>

<h1>Hello</h1>

<p>Pokemon World</p>

<p>Pikachu!</p>

</>

);

};

export default Hello;

문제없쥬~?

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019