[React] useState 와 일반 변수의 차이

 

일반 변수의 선언과 할당
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 함수는 버튼이 눌렀을 때 실행이 되었지만, 랜더링은 이루어지고 있지 않다는 뜻이다.

▶ useState로 카운터 앱 만들기

funtion App() {
  const [num, setNum] = useState(1);

  return (
    <>
    <div>{num}</div>
    <button onClick={() => {setNum(num + 1)}}>숫자를 올려!</button>
    </>
    )
}

useState 를 사용해 버튼을 눌렀을 때 setNum 함수를 실행시키면 숫자가 올라가는 것을 볼 수 있다.

이는, setNum 함수가 실행될때마다 화면이 재랜더링되기 때문이다.