📚 Reference

• 공식 문서 1

📜 Chapter

Redux

Zustand

useSyncExternalStore

• useSyncExternalStore
• useSyncExternalStore는 React 외부의 데이터 소스(external store)를 React 상태와 동기화하기 위해 사용되는 특수 목적의 훅이다.
• 이 훅은 Redux, Zustand 같은 전역 상태 관리 라이브러리나, 브라우저의 localStorage와 같은 외부 API의 데이터를 읽어올 때 사용된다.

역할

• useSyncExternalStore의 핵심은 "눈물(Tearing)" 문제를 해결하는 것이다.
• React 18의 동시성(Concurrent) 렌더링 기능은 컴포넌트를 비동기적으로 렌더링할 수 있다.
• 만약 이 과정에서 외부 데이터가 변경되면, React는 변경 사항을 즉시 반영하지 못해 UI의 일부는 최신 값을, 다른 일부는 이전 값을 보여주는 일관성 없는 상태가 발생할 수 있다.
• 이를 "눈물(Tearing)" 현상이라고 부른다.
• useSyncExternalStore는 이 문제를 해결하여, 외부 데이터의 변경이 발생할 때 React가 항상 동기적으로 최신 데이터를 읽어와서 UI를 업데이트하도록 보장한다.

사용 방법

• useSyncExternalStore는 세 개의 함수를 인수로 받는다.
  1. subscribe: 외부 데이터의 변경을 감지하는 구독(subscription) 함수이다. 데이터가 변경되면 React에게 알리는 역할을 한다.
  2. getSnapshot: 외부 데이터의 현재 값을 반환하는 함수입니다. React는 이 함수를 호출하여 최신 데이터를 가져온다.
  3. getServerSnapshot: 서버 렌더링(SSR) 환경에서 사용되는 함수로, 초기 값을 제공한다. (선택 사항)