jotai-history는 고급 상태 기록 관리를 위한 유틸리티 패키지입니다.

설치

npm install jotai-history

withHistory

Signature

declare function withHistory<T>(targetAtom: Atom<T>, limit: number): Atom<T[]>

이 함수는 주어진 targetAtom의 상태 기록을 유지하는 아톰을 생성합니다. limit 매개변수는 유지할 최대 기록 상태 수를 결정합니다. 이 기능은 시간에 따른 변화를 추적하는 데 유용합니다.

기록 아톰은 targetAtom의 변경 사항을 추적하고, 지정된 limit까지 이전 상태 목록을 유지합니다. targetAtom이 변경되면 새로운 상태가 기록에 추가됩니다.

사용법

import { atom, useAtomValue, useSetAtom } from 'jotai'
import { withHistory } from 'jotai-history'

const countAtom = atom(0)
const countWithPrevious = withHistory(countAtom, 2)

function CountComponent() {
  const [count, previousCount] = useAtomValue(countWithPrevious)
  const setCount = useSetAtom(countAtom)

  return (
    <>
      <p>Count: {count}</p>
      <p>Previous Count: {previousCount}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </>
  )
}

withUndo

Signature_iJK7t64A7kx5ishoUsX7WT

type Undoable = {
  undo: () => void
  redo: () => void
  canUndo: boolean
  canRedo: boolean
}
declare function withUndo<T>(
  targetAtom: WritableAtom<T, [T], any>,
  limit: number,
): Atom<Undoable>

withHistory는 아톰에 실행 취소(undo)와 다시 실행(redo) 기능을 제공합니다. 이 함수는 targetAtom의 값 이력을 추적하고, 그 이력을 통해 앞뒤로 이동할 수 있는 메서드를 제공합니다.

반환된 객체는 다음과 같은 속성을 포함합니다:

• undo: 이전 상태로 되돌리는 함수
• redo: 다음 상태로 이동하는 함수
• canUndo: 실행 취소가 가능한지 여부를 나타내는 불리언 값
• canRedo: 다시 실행이 가능한지 여부를 나타내는 불리언 값

Usage_cmZe3gZKLvnYHLojnn9SvW

import { atom, useAtom, useAtomValue } from 'jotai'
import { withUndo } from 'jotai-history'

const counterAtom = atom(0)
const undoCounterAtom = withUndo(counterAtom, 5)

function CounterComponent() {
  const { undo, redo, canUndo, canRedo } = useAtomValue(undoCounterAtom)
  const [value, setValue] = useAtom(counterAtom)

  return (
    <>
      <p>Count: {value}</p>
      <button onClick={() => setValue((c) => c + 1)}>Increment</button>
      <button onClick={undo} disabled={!canUndo}>
        Undo
      </button>
      <button onClick={redo} disabled={!canRedo}>
        Redo
      </button>
    </>
  )
}

메모리 관리

⚠️ withHistory와 withUndo는 상태 기록을 유지하기 때문에, 적절한 limit을 설정하여 메모리를 관리하는 것이 중요합니다. 과도한 기록은 특히 상태 업데이트가 빈번한 애플리케이션에서 메모리 부풀림을 초래할 수 있습니다.