[ React ] SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. 오류 해결 방법

💥 React 실행 후 발생한 에러 메시지

Compiled with problems:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/user/Documents/study/react/sec02/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (37:12)

 

Error image

❓에러 발생 이유

JSX 문법 오류 입니다. JSX는 기본적으로 최상위 요소(Element)를 사용해야합니다.
하지만 최상위 요소(Element)가 존재하지 않아서 나타난 문법 오류 에러 메시지 입니다.

 

정말 알기 쉽게 정리한 JSX란?

 

✅ 해결 방법

• JSX의 문법을 지켜 부모(root) 요소를 작성해 줍니다.

이전 코드

render() {
    return (
        <div>hi</div>
        <div>hello</div>
    )
}

 

수정 코드

render() {
    return (
        <div className="root"> // 최상위 요소 추가
            <div>hi</div>
            <div>hello</div>
        </div>
    )
}

 

응답 결과

result

전체 코드

App.js

import React, {Component} from 'react';
import "./App.css"

export default class App extends Component {
    render() {
        return (
            <div className="root"> // 최상위 요소 추가
                <div>hi</div>
                <div>hello</div>
            </div>
        )
    }
}

참고로 위 코드는 클래스 컴포넌트 생성 방식입니다. 최근에는 함수형 컴포넌트 생성 방식을 더 선호합니다.