[오늘의 에러] Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 에러

리액트로 프로젝트를 하다가 에러가 났다 😇 하하!

📍 에러 이름

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

📍 발생 원인

다양한 이유가 있겠지만 나같은 경우는 찾아보니 컴포넌트 렌더링 할 때 반환되는 루트 태그가 2개 있어서 발생했던 경우였다.
JSX를 쓰려면 하나의 태그로 묶어두자!

📍 해결 방법

div 태그로 따로 묶어주었다!

• 아래는 예시이다.

✅ 에러 상황

<h1>hi</h1>
<h2>hello</h2>

✅ 정상 동작

<div>
<h1>hi</h1>
<h2>hello</h2>
</div>