문제상황
컴포넌트에 상태를 추가했는데 렌더링이 되지 않았다. 개발자도구로 로그를 확인했더니 다음과 같은 메세지가 떴다.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</body>
</html>
Javascript
const $root = document.querySelector("#root");
function App() {
let [counter, modifier] = React.useState(0);
const onClick = () => {
counter += 1;
console.log(counter);
};
return (
<div>
<h3>Total Clicks: {counter}</h3>
<button>Click me</button>
</div>
);
}
ReactDOM.render(<App />, $root);
문제의 원인
React와 ReactDOM의 버전 설정이 잘못되었다. 16.0.7로 설정을 했었는데 최소한 16.8 이상으로 설정을 해야한다. useState는 훅이기 때문이다. 훅은 16.8 이후로부터 도입 된 개념이다. 따라서 useState을 16.8 이전의 버전에서 사용하면 당연히 인식이 안된다...
문제 해결
React와 ReactDOM의 버전을 변경하면 된다. 훅은 React에서 자주 사용하는 개념이니 React버전이 16.8 이후인지 항상 확인하자.
이전코드
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>이후코드
<script src="https://unpkg.com/react@16.8.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.production.min.js"></script>