Jotai

상태

React를 위한 기본적이고 유연한 상태 관리

Debugging

기본적인 앱에서는 console.log가 아톰을 디버깅하는 데 가장 좋은 친구가 될 수 있습니다. 하지만 애플리케이션이 커지고 사용할 아톰이 많아지면, 로깅은 아톰을 디버깅하는 좋은 방법이 아닙니다.

Jotai는 아톰을 디버깅하는 두 가지 방법을 제공합니다: React Dev Tools와 Redux Dev Tools입니다. 값을 읽고 간단한 디버깅을 할 때는 React Dev Tools가 적합할 수 있지만, 시간 여행(time-travelling)이나 값을 설정하는 것과 같은 더 복잡한 작업에는 Redux Dev Tools가 더 나은 선택이 될 것입니다.

디버그 라벨

Jotai에는 디버그 라벨이라는 개념이 있습니다. 이는 디버깅에 도움을 줄 수 있습니다.
기본적으로 각 Jotai 상태는 1:<no debugLabel>과 같은 라벨을 가지고 있습니다. 여기서 숫자는 각 아톰에 자동으로 할당된 내부 key입니다. 하지만 debugLabel을 사용해 아톰에 라벨을 추가하면 더 쉽게 구분할 수 있습니다.

const countAtom = atom(0)
// countAtom의 기본 debugLabel은 'atom1'입니다.
if (process.env.NODE_ENV !== 'production') {
  countAtom.debugLabel = 'count'
  // 이제 debugLabel은 'count'입니다.
}

Jotai는 Babel과 SWC 플러그인을 제공합니다. 이 플러그인은 모든 아톰에 자동으로 debugLabel을 추가해 줍니다. 이를 통해 작업이 더 쉬워집니다. 자세한 내용은 jotai/babel과 @swc-jotai/debug-label를 참고하세요.

React Dev Tools 사용하기

React Dev Tools를 사용하여 Jotai 상태를 확인할 수 있습니다. 이를 위해 커스텀 훅 내부에서 useDebugValue가 사용됩니다. 이 기능은 개발 모드(NODE_ENV === 'development')에서만 작동한다는 점을 유의하세요.

useAtom

useAtom은 atom 값에 대해 useDebugValue를 호출합니다. 따라서 React Dev Tools에서 Jotai atom을 사용하는 컴포넌트를 선택하면, 해당 컴포넌트에서 사용 중인 각 atom에 대한 "Atom" 훅과 현재 값을 확인할 수 있습니다.

useAtomsDebugValue

useAtomsDebugValue는 Provider 아래에 있는 컴포넌트 트리(또는 Provider가 없는 모드에서는 전체 트리)의 모든 아톰을 캐치하고, 모든 아톰 값에 대해 useDebugValue를 사용합니다. React Dev Tools에서 useAtomsDebugValue가 있는 컴포넌트로 이동하면, "AtomsDebugValue"라는 커스텀 훅을 볼 수 있습니다. 이를 통해 모든 아톰 값과 그 의존성을 확인할 수 있습니다.

이 훅을 사용하는 한 가지 예는 Provider 컴포넌트 바로 아래에 훅을 배치하는 것입니다:

const DebugAtoms = () => {
  useAtomsDebugValue()
  return null
}

const Root = () => (
  <Provider>
    <DebugAtoms />
    <App />
  </Provider>
)

Redux DevTools 사용하기

Redux DevTools를 사용하여 아톰을 검사할 수 있습니다. 이 도구는 시간 여행(Time-travelling)이나 값 디스패치(value dispatching)와 같은 다양한 기능을 제공합니다.

useAtomDevtools

useAtomDevtools는 특정 아톰을 위한 ReduxDevTools 확장을 관리하는 React 훅입니다.

디버깅하고 싶은 특정 아톰이 있다면, useAtomDevtools를 사용하는 것이 좋은 선택일 수 있습니다.

const countAtom = atom(0)
// 아톰이 여러 개라면 countAtom.debugLabel을 설정하는 것을 권장합니다.

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  useAtomDevtools(countAtom)
}

이제 setCount를 사용하면 Redux Dev Tools에서 해당 변경 사항이 즉시 기록되는 것을 확인할 수 있습니다.

타임 트래블

때로는 아톰 상태의 특정 값으로 전환해야 할 때가 있습니다. 타임 트래블을 사용하면 이 작업이 가능합니다.
개발자 도구에서 각 액션 위로 마우스를 가져가면 Jump 옵션이 표시됩니다. 이 옵션을 클릭하면 해당 특정 값으로 전환할 수 있습니다.

일시 중지

아톰에 변경 사항을 기록하지 않으려면 일시 중지 기능을 사용하여 해당 아톰의 감시를 중지할 수 있습니다.

Dispatch

Dispatch 기능을 사용하면 아톰에 값을 설정할 수 있습니다. Show Dispatcher 버튼을 클릭하면 이 기능을 사용할 수 있습니다. 이렇게 하면 countAtoms의 값이 5로 설정됩니다.

값은 JSON.parse로 파싱되므로 지원되는 값을 전달해야 합니다.

useAtomsDevtools

useAtomsDevtools는 특정 아톰만 보여주는 useAtomDevtools의 확장 버전으로, 스토어에 있는 모든 아톰을 보여줍니다.

여러분이 모든 아톰을 한 곳에서 관리하고 싶다면 이 훅을 사용하는 것을 추천합니다. 이 훅 아래에 위치한 (React 트리에서) 모든 아톰에 대한 액션이 Redux Dev Tools에 잡힙니다.

useAtomDevtools의 모든 기능이 이 훅에서 지원되며, 추가적으로 아톰의 의존성에 대한 더 많은 정보를 제공합니다. 예를 들면 다음과 같습니다:

{
  "values": {
    "atom1:count": 0,
    "atom2:doubleCount": 0,
    "atom3:half": 0,
    "atom4:sum": 0
  },
  "dependents": {
    "atom1:count": ["atom1:count", "atom2:doubleCount", "atom4:sum"],
    "atom2:doubleCount": ["atom3:half", "atom4:sum"],
    "atom3:half": ["atom4:sum"],
    "atom4:sum": []
  }
}

Frozen Atoms

실수로 아톰에 저장된 객체를 변경하려고 할 때 발생하는 버그를 찾으려면 jotai/utils 번들에서 제공하는 freezeAtom 또는 freezeAtomCreator를 사용할 수 있습니다. 이 함수들은 Object.freeze를 사용하여 아톰의 값을 깊이 얼려서 반환합니다.

freezeAtom

freezeAtom(anAtom): AtomType

freezeAtom은 기존의 아톰을 "고정(frozen)" 상태로 만듭니다. 이 함수는 동일한 아톰을 반환합니다. 아톰의 값은 Object.freeze를 통해 깊은 고정(deep freeze)이 적용됩니다. 이 기능은 의도치 않게 객체(상태)를 변경하려고 시도했을 때 발생할 수 있는 예상치 못한 동작을 찾는 데 유용합니다. 여러분은 모든 아톰에 freezeAtom을 사용하여 이러한 상황을 방지할 수 있습니다.

매개변수

anAtom (필수): 고정하려는 아톰.

예제

import { atom } from 'jotai'
import { freezeAtom } from 'jotai/utils'

const objAtom = freezeAtom(atom({ count: 0 }))

freezeAtomCreator

필요한 경우 freezeAtom을 위한 팩토리를 정의할 수 있습니다.

import { freezeAtom } from 'jotai/utils'

export function freezeAtomCreator<
  CreateAtom extends (...args: unknown[]) => Atom<unknown>,
>(createAtom: CreateAtom): CreateAtom {
  return ((...args: unknown[]) => freezeAtom(createAtom(...args))) as never
}

JotaiJotai

Debugging

Jotai docs

Jotai