useSyncExternalStore

• 외부 데이터 저장소와 리액트 컴포넌트를 동기화하는데 사용된다.
• 외부 상태 관리 라이브러리(Redux, mobx, recoil..)즉, 리액트에 의존하지 않는 스토어를 useState와 useEffect를 통해서 변경사항을 추적하고, useState의 setter를 통하여 리액트의 리렌더링 및 동기화를 해준다고 생각하면 된다.
• 리액트의 Concurrent mode와 호환되도록 설계되어있다.

기본 문법

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

• subscribe
  • 저장소 변경을 구독하는 함수
• getSnapshot
  • 현재 저장소 상태의 스냅샷을 반환하는 함수
• getServerSnapshot
  • 서버 렌더링 시, 초기 상태를 제공하는 함수

작동 방식

• 리액트는 subscribe함수를 사용하여 저장소의 변경사항을 구독한다.
• 변경이 감지되면, getSnapshopt을 호출하여 최신 상태를 가져온다.
• 컴포넌트는 새로운 상태로 다시 렌더링된다.

어떻게 리렌더링 되는걸까?

• subscribe함수를 통해, 외부 저장소의 변경을 감지한다.
• 변경이 감지되면 getSnapshot함수를 호출하여, 새로운 상태 스냅샷을 가져온다.
• 이 새 스냅샷과 이전 스냅샷을 비교한다.
• 스냅샷이 변경되었다고 판단되면, 리액트는 내부적으로 상태 업데이트를 트리거한다.
• 이는 useState, useReducer를 사용할 때와 유사한 메커니즘으로 동작한다.
• 즉 핵심은 useSyncExternalStore가 리액트의 내부 상태 관리 시스템과 통합되어 있다는 점이다.
• 이 훅은, 외부 저장소의 변경을, 리액트 상태 업데이트 메커니즘으로 번역한다.