(리액트) Uncaught SyntaxError: Unexpected token '<' (at ...)
2023. 4. 6. 09:59ㆍNode js/React
index.html 소스 :
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>이것을 브라우저에서 열면 Uncaught SyntaxError: Unexpected token '<' (at ...) 가 발생한다.
문제의 원인은
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
정확히 짚어 보면,
<h1>Develop. Preview. Ship. 🚀</h1>
때문이다. 이렇게 생긴 코드를 JSX 라고 하며, 유효한 javascript 가 아니기 때문에 웹 브라우저가 인식하지 못하는 것이다.
이것을 해결하려면
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>를 index.html 에 삽입하고 JSX 가 들어 있는 줄을
<script type="text/jsx">로 감싸면 된다.
바벨 적용 후 index.html 소스 :
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <-- 여기
<script type="text/jsx"> <-- 여기
const root = document.getElementById('root');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, root);
</script>
</body>
'Node js > React' 카테고리의 다른 글
| 리액트 컴포넌트끼리 중첩하기 (0) | 2023.04.06 |
|---|---|
| HTML 을 리액트 컴포넌트로 나누기 (0) | 2023.04.06 |
| React 클래스형 + (코드 분리 방식) (0) | 2023.04.05 |
| React 함수형 선언방식 (0) | 2023.04.05 |
| React 방식으로 요소 추가하기 (0) | 2023.04.05 |