이 기사에서는 조건에 따라 다시 렌더링을 방지하는 createWithEqualityFn을 검증하기 위해 작성된 테스트 케이스와 통과할 수 있는 동등 함수를 이해합니다.

아래 코드는 basic.test.ts에서 선택되었습니다.

it('uses the store with a selector and equality checker', async () => {
  const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )
  const { setState } = useBoundStore
  let renderCount = 0

  function Component() {
    // Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )
    return (
      

        renderCount: {  renderCount}, value: {item.value}
      
    )
  }

  const { findByText } = render(
    
      >,
  )

  await findByText('renderCount: 1, value: 0')

  // This will not cause a re-render.
  act(() => setState({ item: { value: 1 } }))
  await findByText('renderCount: 1, value: 0')

  // This will cause a re-render.
  act(() => setState({ item: { value: 2 } }))
  await findByText('renderCount: 2, value: 2')
})

Zustand는 테스트 요구에 Vitest를 사용합니다. 위의 코드 조각을 살펴보겠습니다.

createWithEqualityFn 초기화

const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )

createWithEqualityFn은 상태 () => ({ 항목: { 값: 0 } })로 초기화되고 동등 함수는 Object.is

createWithEqualityFn은 createState와 defaultEqualityFn이라는 두 개의 변수를 허용합니다.

재렌더링 방지

// Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )

useBoundStore는 일치하는 값을 기반으로 다시 렌더링하는 것을 방지하는 데 사용되는 선택기와 동등 기능을 허용합니다.

basic.test의 위 예시는 값이 1일 때 재렌더링을 방지하기 위해 사용됩니다.

await findByText('renderCount: 1, value: 0')

// This will not cause a re-render.
act(() => setState({ item: { value: 1 } }))
await findByText('renderCount: 1, value: 0')

// This will cause a re-render.
act(() => setState({ item: { value: 2 } }))
await findByText('renderCount: 2, value: 2')

이러한 어설션은 상태 업데이트로 인해 다시 렌더링이 발생하지 않음을 검증합니다.

회사 소개:

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

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

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

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

참조:

1. https://github.com/pmndrs/zustand/blob/main/tests/basic.test.tsx#L92

2. https://vitest.dev/guide/