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><buttononClick={() =>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></>)}