JotaiJotai

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

Resettable

Jotai 코어는 리셋 가능한 아톰을 지원하지 않습니다.
하지만 jotai/utils의 헬퍼 함수를 사용해 이를 직접 만들 수 있습니다.

초기화 가능한 원시 아톰: atomWithReset / useResetAtom

import { useAtom } from 'jotai'
import { atomWithReset, useResetAtom } from 'jotai/utils'
const todoListAtom = atomWithReset([
{ description: '할 일 추가', checked: false },
])
const TodoList = () => {
const [todoList, setTodoList] = useAtom(todoListAtom)
const resetTodoList = useResetAtom(todoListAtom)
return (
<>
<ul>
{todoList.map((todo) => (
<li>{todo.description}</li>
))}
</ul>
<button
onClick={() =>
setTodoList((l) => [
...l,
{
description: `새 할 일 ${new Date().toDateString()}`,
checked: false,
},
])
}
>
할 일 추가
</button>
<button onClick={resetTodoList}>초기화</button>
</>
)
}

예제

RESET 심볼을 사용한 파생 아톰

import { atom, useAtom, useSetAtom } from 'jotai'
import { atomWithReset, useResetAtom, RESET } from 'jotai/utils'
const dollarsAtom = atomWithReset(0)
const centsAtom = atom(
(get) => get(dollarsAtom) * 100,
(get, set, newValue: number | typeof RESET) =>
set(dollarsAtom, newValue === RESET ? newValue : newValue / 100)
)
const ResetExample = () => {
const [dollars] = useAtom(dollarsAtom)
const setCents = useSetAtom(centsAtom)
const resetCents = useResetAtom(centsAtom)
return (
<>
<h3>현재 잔액 ${dollars}</h3>
<button onClick={() => setCents(100)}>$1 설정</button>
<button onClick={() => setCents(200)}>$2 설정</button>
<button onClick={resetCents}>초기화</button>
</>
)
}