React Hook useState가 const를 사용하고 let을 사용하지 않는 이유

React useState Hook를 사용하는 표준 방법은 다음과 같습니다.

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

그러나이 const count변수는 분명히 다른 기본 값으로 재 할당 될 것입니다.

그렇다면 왜 변수가로 정의되지 let count않습니까?

다른 기본 값으로 명확하게 재 할당 될 것입니다

실제로는 아닙니다. 컴포넌트가 다시 렌더링되면 함수가 다시 실행되어 새 범위를 작성하고 새 count변수를 작성하며 이전 변수와 관련이 없습니다.

예:

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

참고 : 후크는 훨씬 정교하며 실제로 이와 같이 구현되지는 않습니다. 이것은 비슷한 동작을 보여주기위한 것입니다.

const 동일한 범위 내에서 참조 값을 다시 할당하지 않도록 보호합니다.

에서 MDN

변수 식별자를 재 할당 할 수 없다는 것만으로 보유한 값이 변경 불가능하다는 의미는 아닙니다.

또한

상수는 같은 범위에있는 함수 또는 변수와 이름을 공유 할 수 없습니다.

setCount를 호출 한 후 컴포넌트가 다시 렌더링되고 새로운 useState 호출이 새 값을 리턴합니다. 요점은 카운트가 변경 불가능하다는 것입니다. 오타가 없습니다.

기술적으로 이것은 모든 렌더에서 새로운 변수입니다.

출처 : React Github 문제 : Docs-Hooks : 그 구성 요소가 오타입니까?

여기서 카운트가 변경되어야하기 때문에 const가 좌절한다는 것을 알았습니다.

  let [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
  };