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

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

React로 프론트엔드 개발을 처음 접하는 경우 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 에러를 접할 수 있을 것 같다. 해당 에러 해결하는 방법을 알아보자.

 

■ 해결하기

우선 해당 에러가 표시되는 이유가 있다. React는 부모 레벨의 요소가 1개 있어야 한다. 이게 무슨 말인가? 아래 코드를 확인해보자.

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

위 코드는 1, 2, 3, 4를 감싸고 있는 div들은 모두 형제 요소이다. 즉, div 4개를 감싸고 있는 부모 요소가 있어야 한다. 아마 이 게시글을 보고 있는 사람들도 저렇게 되어 있어 위 에러가 발생한 것이다. 그럼 어떻게 해결할까?

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

아주 간단하게 div로 감싸줄 수 있다. 그러나 굳이 div를 쓰기 싫다면 JSX fragment <> </>를 사용하면 된다.

<>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</>

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.