이 글에서는 Zustand가 [소스 코드]에서 useSyncExternalStoreExports를 어떻게 사용하는지 살펴보겠습니다.

useSyncExternalStoreExports는 use-sync-external-store/shim/with-selector에서 가져옵니다. use-sync-external-store는 React.useSyncExternalStore를 위한 이전 버전과 호환되는 shim입니다. Hooks를 지원하는 모든 React와 작동합니다.

위 문장을 읽으면서 SyncExternalStore의 용도가 무엇인지 궁금하실 것입니다.

동기화외부스토어 사용

useSyncExternalStore는 외부 저장소를 구독할 수 있게 해주는 React Hook입니다.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

useSyncExternalStore를 사용하여 다음과 같은 외부 저장소에서 값을 읽습니다.

1. React 외부에서 상태를 유지하는 타사 상태 관리 라이브러리.

2. 변경 가능한 값과 변경 사항을 구독하기 위한 이벤트를 노출하는 브라우저 API입니다.

사용 예:

import { useSyncExternalStore } from 'react';
import { todosStore } from './todoStore.js';

function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  // ...
}

위의 예는 React 문서에서 선택되었습니다.

useSyncExternalStore 사용법:

Zustand는 src/traditional.ts에서 useSyncExternalStore를 사용합니다.

import ReactExports from 'react'
// eslint-disable-next-line import/extensions
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
import { createStore } from './vanilla.ts'
import type {
  Mutate,
  StateCreator,
  StoreApi,
  StoreMutatorIdentifier,
} from './vanilla.ts'

const { useDebugValue } = ReactExports
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports

useSyncExternalStoreWithSelector는 useSyncExternalStoreExports에서 구조 해제되었으며 이는 useStoreWithEqualityFn에서 사용됩니다.

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}

useSyncExternalStoreWithSelector에는 api.subscribe, api.getState, api.getInitialState, 선택기 및 EqualityFn이 있습니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 [email protected]으로 문의하세요!

참조:

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L44

2. https://www.npmjs.com/package/use-sync-external-store

3. https://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstore

4. https://react.dev/reference/react/useSyncExternalStore

5. https://github.com/reactwg/react-18/discussions/86