React - JSX elements must be wrapped in an enclosing tag 해결 방법

리액트 개발하다 보면 아래 오류를 만나게 됩니다.

오류

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

원인

function App() {
    return (
        <h2>Hello React</h2>
        <p>I'm superman</p>
    );
}

위 오류는 위 같이 h2 태그와 p태그를 하나의 태그에 묶지 않아서 발생하게 됩니다. 

이것이 왜 문제가 될까요?

return (
   React.createElement('h2', {}, 'Hello React');
   React.createElement('p', {}, 'superman');
)

위와 같이 하나의 return 값에 두 가지가 들어가 있어서 오류를 나타나게 됩니다.

해결방법 1 - div 태그 감싸주기

간단히 해결하시려면 h2 태그와 p태그에 div를 감싸주시면 됩니다.

function App() {
    return (
        <div>
            <h2>Hello React</h2>
            <p>I'm superman</p>
        </div>
    );
}

div로 감싸게 되면 문제점이 있습니다.

원하지 않는 태그가 생기게 되어서 컴포넌트를 여러 개를 만들게 되면 div 태그가 중첩되게 됩니다.

해결방법 2 - 빈태그 감싸주기

아래와 같이 빈태그를 감싸주게 되면  빈태그는 자연스럽게 사라지게 됩니다.

불필요한 div 태그가 중첩되지 않게 할 수 있습니다.

function App() {
    return (
        <>
            <h2>Hello React</h2>
            <p>I'm superman</p>
        </>
    );
}

해결방법 3 - Fragment 사용하기

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

위 에러 메시지에서 fragment를 사용하지 않겠냐고 물어봅니다.

fragment를 사용할 수 있습니다.

import {Fragment} from "react";

function App() {
    return (
        <Fragment>
            <h2>Hello React</h2>
            <p>I'm superman</p>
        </Fragment>
    );
}

Fragment란?

React Fragment는 여러 엘리먼트를 return 할 수 있는 패턴입니다.

Fragment 내부에 있는 자식들을 return 해주는 리액트에서 제공하고 있는 방법입니다.

function Fragment(props) {
  return props.children;
}

 

리액트 Fragment를 이용해서 위 오류를 해결할 수 있습니다.

모두들 행복 코딩하세요.