이 글에서는 이해를 돕기 위해 해당 값 중 일부를 기록하여 createWithEqualityFnImpl이 어떻게 구현되는지 분석하겠습니다.

위 이미지에서 알 수 있듯이 createWithEqualityFn은 createWithEqualityFnImpl 함수를 호출합니다. 이 패턴은 바닐라.ts에서도 사용되며 아래에 설명되어 있습니다:

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

createStore는 createStoreImpl을 호출하고 createWithEqualityFn은 createWithhEqualityFnImpl을 호출합니다.

createWithEqualityFn 실행에 앞서 먼저 createWithEqualityFn을 사용하는 목적을 이해해 보겠습니다.

위 스크린샷은 https://github.com/pmndrs/zustand/tree/main

createWithEqualityFn을 사용하면 다시 렌더링을 더 효과적으로 제어할 수 있습니다.

EqualityFn으로 생성

const createWithEqualityFnImpl = (
  createState: StateCreator,
  defaultEqualityFn?: (a: U, b: U) => boolean,
) => {
  const api = createStore(createState)

  const useBoundStoreWithEqualityFn: any = (
    selector?: any,
    equalityFn = defaultEqualityFn,
  ) => useStoreWithEqualityFn(api, selector, equalityFn)

  Object.assign(useBoundStoreWithEqualityFn, api)

  return useBoundStoreWithEqualityFn
}

useStoreWithEqualityFn

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

export function useStoreWithEqualityFn, U>(
  api: S,
  selector: (state: ExtractState) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

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
}

이것은 오버로딩 기능입니다. useStoreWithEqualityFn에는 3가지 정의가 있습니다:

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

export function useStoreWithEqualityFn, U>(
  api: S,
  selector: (state: ExtractState) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {

슬라이스 값이 어떻게 보이는지 살펴보겠습니다.

값: 1은 아래와 같이 값이 1일 때 다시 렌더링되지 않도록 코드를 설정했기 때문에 건너뜁니다.

회사 소개:

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

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

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

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

참조:

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

2. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L39