[React] Adjacent JSX elements must be wrapped in an enclosing tag

리액트(React)를 사용하면서 처음에 가장 많이 하는 실수들이 있는데, 그 중 하나는 다음과 같은 에러 메시지입니다.

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (25:4)

사실 이 문제의 원인과 해결 방법은 매우 간단하며 영문을 해석하면 답이 쉽게 나옵니다. 먼저 문제가 되는 Main 컴포넌트의 코드를 살펴보겠습니다.

const Main = () => {
  return (
    <div className="panelA">
      <h1>Hello, react!</h1>
    </div>
    <div className="panelB">
      Bye, React!
    </div>
  );
};

export default Main;

문제의 원인은 React에서 부모 태그(컴포넌트의 최상위 태그)는 오직 한개여야 하는데, 위 예시처럼 div 태그 두개가 동시에 부모 태그로 존재하기 때문에 발생했었습니다. 이는 JSX의 문법이기 때문에 부모 태그는 하나만 있어야 한다는 것을 반드시 기억하셔야 합니다.

따라서 해결 방법은 부모 태그를 하나로 만들 수 있는 감싸는 태그를 하나 더 만들어주는 것입니다. 아래 예시는 div 태그로 감싸주었지만 꼭 div 태그가 아니여도 좋습니다.

const Main = () => {
  return (
    <div>
      <div className="panelA">
        <h1>Hello, react!</h1>
      </div>
      <div className="panelB">
        Bye, React!
      </div>
    </div>
  );
};

export default Main;

이렇게 하면 더 이상 에러 메시지가 나타나지 않습니다.

여기에서 더 나아가서, 최상위 태그를 div로 표현하지 않고, 하위 컴포넌트를 감싸는 래퍼임을 명확하게 알리기 위해 <div> 대신 <React.Fragment>로 표현할 수 있습니다. div에 특별한 속성이 없었다면 결과는 같을 것입니다.

좀 더 최근의 React에서는 React.Fragment 태그를 더 단축시켜 아예 이름이 없는 빈 태그 (<>와 </>)로 바꿀 수도 있습니다. 이렇게하면 무언가 하위 컴포넌트를 감싸고 있다는 구분을 조금 더 확실하게 표현할 수 있습니다.

const Main = () => {
  return (
    <>
      <div className="panelA">
        <h1>Hello, react!</h1>
      </div>
      <div className="panelB">
        Bye, React!
      </div>
    </>
  );
};

export default Main;

이렇게 표현하면 조금 더 최상위 태그의 느낌이 날 것입니다. 하지만 주의사항이 있습니다. 빈 태그를 사용할 때는 빈 태그의 HTML 속성이나 컴포넌트 속성(Props)을 넣을 수 없습니다. 따라서 속성을 사용해야 한다면 React.Fragment나 다른 태그를 사용해주어야 합니다.