해당 글은 useState가 어떤 식으로 함수형 컴포넌트에서 동작하는지를 대략적으로 그림으로 시각화하여 소개합니다.
전역 변수로 선언된 cnt는 웹 페이지의 렌더링 횟수를 알려주는 것이며 버튼을 클릭했을 때
if (num == 1)이 언제 동작하는지를 예상해봅시다.
제가 작성한 코드에서 cnt는 렌더링의 횟수를 알기 위해서 선언했습니다.
위 그림에서는 처음 시작했을 때의 값이 0과 1이 console에 찍혀있으며,
버튼을 클릭할 때마다 [2, 3] -> [4, 5]가 찍혀있습니다.
이 말은 곧 렌더링이 한번에 총 2번 실행된다는 것이며 이는 React.StrictMode의 설정으로 인해 발생되는 것 이며
npx create-react-app 으로 생성하면 자동 설정이 되있습니다.
StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
다시 돌아가서,
우리는 평소에 알고 있던 getter, setter를 통해서
버튼 클릭 한번으로 num의 값이 1이 되어 console에 "실행?"이 찍히게 된다고 생각합니다.
하지만 버튼을 두 번 클릭해서야 '실행?'이라는 문구가 나오게 되며 이것은
리액트의 useState는 다르게 동작되기 때문인데,
이를 자세히 살펴보겠습니다.
사실 num은 const 타입이기 때문에, 재할당을 할 수 없습니다.
num은 어떻게해서 값을 바꿀 수 있었던 것 일까요?
이것을 이해하려면 클로저에 대해 이해할 필요가 있습니다.
클로저의 설명은 길기 때문에, 링크로 대체하겠습니다.
hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/
[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?
React Hook에 대해 이해하려면 JavaScript 클로저에 대해 잘 알아야합니다. React의 작은 복제본을 만들어보며 클로저와 hook의 동작 방식을 알아봅니다.
hewonjeong.github.io
본론으로 돌아와서
리액트가 이 값이 변경 됐다는 것을 판단하는 기준은 객체의 메모리 주소이기 때문입니다.
객체의 주소가 변경되지 않고, 내부의 값만 바뀌면 바뀐것으로 인식을 안합니다.
const [num, setNum] = useState(0)
따라서 const를 사용해도 상관없으며,
위 코드에 맥락상 버튼을 눌렀을 때 num 변수는 계속해서 바꿔줘야 하도록 되어있는데, 굳이 const를 사용하지않고 let을 사용하는게 낫지 않은가라고 생각할 수 있다.
그러나,
컴포넌트가 다시 렌더링되면 함수가 다시 실행되어 새 scope를 만들고, count변수도 새로 만들게 되고, 이는 이전 변수와 상관이 없게 되며. 그래서 const로 선언된 count 변수는 동일한 scope에서 다시 할당하는 것을 막을 수 있다고 한다.
reference: https://dudghsx.tistory.com/18
reference: https://careerly.co.kr/qnas/793
