[React] useState를 선언할 때 let이 아닌 const를 사용하는 이유
강의를 듣다가 useState를 선언할 때 왜 let이 아닌 const를 사용하는지에 대한 의문이 생겼고, 강의 내용을 쓸 수 없기 때문에 구글링을 통해서 클로저에 대한 부가적인 이해 및 관련 글을 읽게 되었다.
hooks에서 useState가 const로 선언되는 이유
카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s
dudghsx.tistory.com
위 두 글을 정독하게 되었는 데 useState를 함수 뜯어보았을 대략적으로나마 어떤 방식으로 hook이 작동되는지 알 수 있었고 그 과정 속에서 클로저의 역할을 이해하게 되었는 데 (이해가 되면서 안 되는 것 같은 기분😵💫)
[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까? — Hewon Jeong
Deep dive: How do React hooks really work?을 저자, Swyx의 허락을 받고 번역한 글입니다. 오타, 오역은 제보해주시면 수정하도록 하겠습니다.👍🏻 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(L
hewonjeong.github.io
위 번역글의 클로저에 대한 정의를 인용해자면 아래와 같은 데
이를 바탕으로 결론을 지어보자면
React의 useState는 함수형 스크프를 사용하여 상태를 저장하고, 상태를 변경하는 함수를 반환하고 있다.
이 함수는 useState가 호출된 시점의 스코프에 대한 참조를 유지하고 있기 때문에 이 함수가 호출될 때마다 그 스코프의 변수에 접근할 수 있게 된다.
(스코프 = 주변 환경 = 클로저가 정의될 때 해당 함수가 선언된 렉시컬 스코프)
즉, 클로저는 state의 상태가 변경될 때마다 해당 상태를 업데이트하는 함수(setState)가 그 시점에서의 최신 상태를 기억하고 유지할 수 있게 하는 역할을 수행한다.
그렇기 때문에
React에서 useState를 선언하고 state의 값을 변경할 때는 변수에 의한 값 변경이 아니라 해당 상태를 업데이트하는 함수를 사용하는 것이 적합하기 때문에 let이 아닌 const를 사용해야 합니다.
이렇게 함으로써 React가 상태를 올바르게 추적하고 컴포넌트를 리렌더링하는 데 필요한 정보를 유지할 수 있습니다.