useState 사용시 const를 사용할 수 있는 이유

벨로퍼트 리액트 강의노트 중, "useState를 사용하면 state가 업데이트 되는데 const [state, setState]를 사용할 수 있는 이유가 뭔가요?" 라는 질문이 있었다.

친절한 분이 Why React Hook useState uses const and not let글을 답변으로 남겨주셨다.

답은 간단했다.
useState로 상태가 업데이트 될때, state값이 변경되는 것이 아니라, 재렌더링이 일어나게 되고 state는 항상 최신 상태의 값을 사용하기 때문이다.

stack overflow답변 중, useState 실제 로직은 더 복잡하겠지만 간단하게 원리만 나타낸 코드를 참고하자.

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

function Component() {
  const [count, setCount] = useState(0);

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender

또 다른 답변의 코드를 참고하면, 아래와 같이 count++로 직접 값을 변경하게 되면 const 재할당 에러가 발생하는 것을 확인할 수 있다.

  const [count, setCount] = useState(0)
  // simply can't use ++ on either side of count increment given we declare as const [count, setCount] 
  // instead declaration of var or let [count, setCount] allows simpler code
  const increment = () => {
    setCount(count++); //const cannot do this only let or var
  };