[React] Fragment(프레그먼트) 사용법

왜 return 다음에 <div>가 들어갈까?

function App() {
  return (
    <div>
      <Header></Header>
      <main></main>
    </div>
  );
}

• jsx 파일에서 return을 보면 굳이 <div>로 감싸고 있다.

 

div를 뺀다면?

  return (
      <Header></Header>
      <main></main>
  );

• 에러가 발생한다.
  • JSX expressions must have one parent element.
  • JSX 표현식에는 하나의 상위 요소가 있어야 한다.
• return 값이 2개의 요소여서 에러가 발생하는 것이다.
• 자바스크립트는 하나의 값만 반환할 있다.
• 하나의 요소만 반환하기 위해 <div>로 감싸는 것이다.

 

불필요한 <div>를 안쓰려면?

 

1. Fragment 프레그먼트

import { useState, Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <Header></Header>
      <main></main>
    </Fragment>
  );
}

• Fragment는 리액트 자체적으로 내장되어 있는 컴포넌트이다.
• 프레그먼트로 감싸면 div를 대신하면서 html 요소에도 출력되지 않는다.
• 프레그먼트에서는 key를 사용할 수 있다. <Fragment key={yourKey}>...</Fragment>

 

2. <>...</> 빈 태그

import { useState } from 'react';

function App() {
  return (
    <>
      <Header></Header>
      <main></main>
    </>
  );
}

• import로 따로 불러오지 않아도 되고, 그냥 <></> 빈 태그를 사용하면 된다.

 

 

참고: https://ko.react.dev/reference/react/Fragment