[React] JSX expressions must have one parent element 에러

 

아래와 같은 코드를 작성했다가 JSX expressions must have one parent element 에러를 받았습니다.

function Loading() {
return 
      <video src="/videos/duck.mp4" type="video/mp4" loop autoPlay muted width="200"/>
      <div className="loading">분석중입니다...</div>;
}

이 에러는 JSX 문법을 사용할 때 여러개의 컴포넌트가 사용될 때 parent element로 컴포넌트를 감싸지 않아서 등장하는 에러기에

 

 

 

function Loading() {
  return (
      <div className="loading">
          <video src="/videos/duck.mp4" type="video/mp4" loop autoPlay muted width="200"/>
          분석중입니다...
      </div>
    );
}

<video> tag를 <div> tag 안으로 넣어줬더니 해결됐습니다.

 

 

 

◡̈