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

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

 

초기 cra(create-react-app) 사용시 위와 같은 에러가 뜹니다. 주로 class 작성시 생기는데요, 해결법은 간단합니다.

 

위 에러발생시 editor에는 다음과 같은 에러가 뜹니다.

 

제가 테스트로 작성한 코드는 다음과 같았습니다.

import React, { Component } from 'react';

class Test extends Component {
  return (
    <div>test</div>
    <div>test</div>
  );
}

export default Test;

 

감이 오시나요? 에러문구를 해석해보면 부보 element가 없다였고, 클래스 생성시 모든 요소를 감쌀 element가 필요함을 알수있습니다.

 

import React, { Component } from 'react';

class Test extends Component {
  return (
    <div>
      <div>test</div>
      <div>test</div>
    </div>
  );
}

export default Test;

 

 

코드를 위와 같이 div로 감싸주니 정상작동 되네요. 이상입니다!