[React ERROR] 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 <>...</>?

💦 발생 원인

리액트 프론트와 관련한 간단 에러 해결 ..
방법은 쉬우나 정말 예상치도 못한 곳에서 고여 있느라 시간 오래 뺏김

💦 에러 메세지

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

💦 발생 원인

JSX 사용 시 하나의 태그로 묶여있어야 하는데.. 여러개의 루트 태그를 걸어놓고 애꿎은 TABLE 구조 탓하느라 시간 오래 뺏김
아무 생각 없이 검색했다가 테이블에 버튼 안들어간다는 사람 많아서 더 확신 가짐

🐱‍💻 해결 방법

완전 초 간단: DIV 태그로 그냥 묶어주면 됨

• 1) 오류 상황 코드

getCommentList.map((item) => (
                  <Comment key={item.id} body={item}></Comment>
                  <button type="button"> 수정!! </button>
                  <button type="button"> 삭제!! </button>
              ))

• 2) 오류 해결 코드

getCommentList.map((item) => (
                <div>
                  <Comment key={item.id} body={item}></Comment>
                  <button type="button"> 수정!! </button>
                  <button type="button"> 삭제!! </button>
                </div>
              ))