이 페이지는 다양한 유틸리티 함수를 만드는 방법을 보여줍니다. 유틸리티 함수는 코딩 시간을 절약해 주며, 여러분의 기본 아톰을 다른 용도로 보존할 수 있게 해줍니다.

utils

useSelectAtom

import { useAtomValue } from 'jotai'
import { selectAtom } from 'jotai/utils'

export function useSelectAtom(anAtom, selector) {
  const selectorAtom = selectAtom(
    anAtom,
    selector,
    // 필요에 따라 `equalityFn`을 커스터마이징하여 리렌더링 조건을 결정할 수 있습니다.
    // 자세한 내용은 selectAtom의 시그니처를 확인하세요.
  )
  return useAtomValue(selectorAtom)
}

// 사용 예시
function useN(n) {
  const selector = useCallback((v) => v[n], [n])
  return useSelectAtom(arrayAtom, selector)
}

이 경우 keyFn은 반드시 안정적이어야 합니다. 렌더링 외부에서 정의하거나 useCallback으로 감싸야 합니다.

useFreezeAtom

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

export function useFreezeAtom(anAtom) {
  return useAtom(freezeAtom(anAtom))
}

useSplitAtom

import { useAtom } from 'jotai'
import { splitAtom } from 'jotai/utils'

export function useSplitAtom(anAtom) {
  return useAtom(splitAtom(anAtom))
}

extensions

useFocusAtom

import { useAtom } from 'jotai'
import { focusAtom } from 'jotai-optics'

/* 여기서 아톰을 생성한다면, `useMemo(() => atom(initValue), [initValue])`를 사용하세요. */
export function useFocusAtom(anAtom, keyFn) {
    return useAtom(focusAtom(anAtom, keyFn))
}

// 사용 방법
useFocusAtom(anAtom) {
    useMemo(() => atom(initValue), [initValue]),
    useCallback((optic) => optic.prop('key'), [])
}

Stackblitz

이 경우 keyFn은 안정적이어야 합니다. 렌더링 외부에서 정의하거나 useCallback으로 감싸야 합니다.