이 글에서는 Zusstand 소스 코드에서 useDebugValue가 어떻게 사용되는지 알아보겠습니다.

useDebugValue는 useStoreWithEquality라는 함수에서 사용됩니다. useDebugValue는 React DevTools의 사용자 정의 Hook에 라벨을 추가할 수 있는 React Hook입니다.

사용자 정의 Hook의 최상위 수준에서 useDebugValue를 호출하여 읽을 수 있는 디버그 값을 표시합니다.

// Pulled from https://react.dev/reference/react/useDebugValue
import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

Zustand에서는 아래와 같은 객체를 슬라이스하는 데 useDebugValue가 사용됩니다.

const slice = useSyncExternalStoreWithSelector(
  api.subscribe,
  api.getState,
  api.getInitialState,
  selector,
  equalityFn,
)

useDebugValue는 src/react.ts에서도 사용됩니다.

회사 소개:

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

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

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

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

참조:

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

2. https://react.dev/reference/react/useDebugValue

3. https://github.com/pmndrs/zustand/blob/0a4f9d0f71477c5ef399191acc19e25674d0d3c4/src/react.ts#L42