react fragment란? 최상단 마크업 없이 jsx를 랜더링 하는 방법.

리액트에서는 JSX라는 문법을 사용한다. 이는 구성 요소 랜더링 구성 방법을 제공하는 방식으로 HTML처럼 생겼지만 Javascript의 확장된 문법이라고 말할 수 있다. (리액트에서 jsx 사용이 필수는 아니다.)

JSX는 한 번에 하나의 element를 반환하기 때문에 반드시 최상위 하나의 DOM을 추가해줘야한다. 다음 코드에서 최상위는 div로 구성된 마크업이다.

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

이 때, h1, h2 두 코드만 랜더링 하고 싶으면 어떻게 해야할까?

<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>

최소 단위를 쪼개서 컴포넌트를 만들거나 최상단에 불필요한 <div>를 넣을 수 밖에 없다. 왜냐하면 최상단 루트가 없는 JSX 코드는 이렇게 syntax error를 일으키기 때문이다.

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

라는 문구를 보면 둘러싼 코드를 요구하고 있고, fragement를 제안하고 있다.

https://ko.reactjs.org/docs/fragments.html

Fragments – React

fragment란 상단과 같은 상황을 해결해주는 아주 나이스한 문법으로 불필요한 마크업 추가 없이 최상단 태그를 만들어 준다.

사용 방법은 아주 간단하다. 바로 전체를 감싸는 fragment만 추가해주면 된다.

import "./styles.css";

export default function App() {
  return (
    <fragment>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </fragment>
  );
}

이보다 더 간단한 방법은 바로 <></>만 추가하는 것이다.

import "./styles.css";

export default function App() {
  return (
    <>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </>
  );
}

이렇게 하면 랜더링 되었을 때, 불필요한 마크업 없이 깔끔하게 랜더링 되는 것을 확인할 수 있다.