일반 변수의 선언과 할당
let num = 1;
num = 2;
useState 의 선언과 할당
```js
const [num, setNum] = useState(1);
setNum(2);
※ useState 를 사용할 때 주의할 점
1. 함수의 상단에 정의한다.
2. 바로 값을 바꾸지 않는다.
3. 반복문 안에 선언하지 않는다.
4. 조건문 안에 선언하지 않는다.
funtion App() {
let num = 1;
funtion increase() {
num++;
console.log(num);
}
return (
<>
<div>{num}</div>
<button onClick={() => {increase()}}>숫자를 올려!</button>
</>
)
}
이렇게 구현할 경우 버튼을 눌렀을 때 숫자가 올라가지 않는다. 하지만 콘솔창에서는 숫자가 올라가는 것을 알 수 있다.
즉, increase 함수는 버튼이 눌렀을 때 실행이 되었지만, 랜더링은 이루어지고 있지 않다는 뜻이다.
funtion App() {
const [num, setNum] = useState(1);
return (
<>
<div>{num}</div>
<button onClick={() => {setNum(num + 1)}}>숫자를 올려!</button>
</>
)
}
useState 를 사용해 버튼을 눌렀을 때 setNum 함수를 실행시키면 숫자가 올라가는 것을 볼 수 있다.
이는, setNum 함수가 실행될때마다 화면이 재랜더링되기 때문이다.