[React Hook] useState

이상하게 리액트 동네는 use가 붙은걸 참 좋아한다

useServer, useCallback, useState, useMemo 등

커스텀 훅들도 다 use가 붙는다

어디서 시작된거지

useState는 유명한 훅이다.

상태값을 저장하고, 바뀌면 리렌더링한다. 되게 간단하다.

모두가 아는 그 예제다.

상태값이 바뀌면 리렌더링이 된다 했는데 리렌더링 되는 스코프는 어떻게 되는걸까?

p tag만? 아님, button 태그까지?

정답은 useState가 호출된 컴포넌트 전체다.

ExampleComponent를 리렌더링하지만

가상돔을 이용해서 값을 비교해서 다른곳만 DOM을 수정한다고 한다.

useState는 매 리렌더링마다 호출되는데, 어떻게 값이 유지될까?

이는 useState의 구조로부터 답이 나온다.

위 코드는 실제 리액트 useState 코드다.

전역 객체에서 dispatcher를 땡겨와서 useState를 쏜다.

이걸로는 구조가 이해가 안된다.

더 파보면 다음과 같은 코드가 나온다.

hook을 가져와서 set함수를 직접 hook에 있는 queue를 bind해서 준다.

(bind는 기존 함수에 this를 바인딩 시키고, 나머지 인자값은 해당 함수의 인자값으로 쓴 뒤, this가 binding 된 새로운 함수를 리턴한다)

이걸로는 이유를 파악하기 힘들다.

좀 더 파보자

매번 init값을 할당해주는걸 볼 수 있다. 이러면 state가 유지되는게 설명이 안된다.

좀 더 파보자. hook이 뭔가 수상해보인다.

currentlyRenderingFiber와 workInProgressHook은 전역변수다.

오른쪽에서부터 할당이 시작되는걸 이용해서 링크드리스트를 구현한 모습이다.

그래서 훅을 까보면 다음과 같은 구조로 예상된다.

말머리에 값이 계속 추가되는 모습이다.

여전히 설명이 안되서 다른 useState 구현체를 본 결과

모두 mountState를 호출하는게 아니였고, 리렌더링 될 경우 updateState, rerenderState를 호출하는거였다.

고로, 구조는 위와 같으며 이벤트에 맞게 다른 함수들이 호출된다는 것이다.

직접 코드를 보고싶으면 react/packages/react-reconciler/src/ReactFiberHooks.js를 참고하면 된다.