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

상황

App.js에 새롭게 생성한 <Hello>컴포넌트 세 개를 넣으려고 했는데 에러가 발생했다.

import Hello from './Hello';

function App() {
  return (
   <Hello/>
   <Hello/>
   <Hello/>
  );
}

export default App;

에러

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

-> 인접한 JSX 요소는 태그로 둘러싸야 합니다. JSX 프래그먼트 <>...</>를 원하십니까?

JSX 문법은 return문 안에 반드시 하나의 최상위 태그가 있어야 하는 규칙이 있는데, 위에 작성한 코드는 최상위 코드로 감싸주지 않아서 발생한 에러이다.

해결

import Hello from './Hello';

function App() {
  return (
  <div>
   <Hello/>
   <Hello/>
   <Hello/>
  </div>
  );
}

export default App;