[React] Uncaught SyntaxError: Unexpected token '<' (at jsx.html:57:7)

오류가 발생한 원인

브라우저가 JSX를 이해하는 것은 아니라서 이런 에러가 발생합니다.
브라우저는 JSX를 invalid라고 생각합니다.

 

JXS는 기본적으로 같고 아래와 같이 코드를 작성을 했다면

 

아래와 같이 코드를 변환시켜야 합니다다. 

Babel을 사용하여 변환을 시켜줍니다. 

Babel은 코드를 변환시켜주는 것입니다. 
즉, JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것입니다.

 

 

해결방법
Bable standalone을 이용해서 다운을 받으면 오류가 사라집니다.

 

 

---

 

위와 같이 script에 추가하여 해결했습니다.

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
  <script type="text/bable;">  
      script 문 작성
  </script>  

* 주의사항 script type으로 된 태그 안에 컴포먼트를 작성하지 않으면 똑같은 오류가 납니다! *

 

 

 

 

+ script에 적은 건 script에서 확인이 가능하고 변환이 된 코드는 body태그 안에서 확인이 가능합니다.

참고
노마더 코드 ReactJS 강의 중에 언급