useAtom으로 Atom 읽기와 쓰기

useAtom(someAtom)은 useState API와 같은 형태로 [value, setter]를 반환합니다. value는 현재 atom 상태이고 setter는 상태를 업데이트합니다. 컴포넌트에서 atom을 읽고 쓰는 경우 사용하세요.

setter에는 새 값이나 업데이트 함수 중 하나를 전달할 수 있습니다: setCount(c => c + 1).

useAtomValue(someAtom)은 설정 함수 없이 현재 값만 반환합니다. 상태를 읽기만 하고 수정하지 않는 표시 전용 컴포넌트에서 사용하세요.

컴포넌트가 설정 함수 참조를 보유하지 않으므로, 코드만 보아도 의도가 분명합니다. 이 컴포넌트는 순수하게 값을 읽기만 합니다.

useSetAtom(someAtom)은 설정 함수만 반환합니다. 중요한 점은 이 훅이 컴포넌트를 atom의 값에 구독시키지 않는다는 것입니다. 따라서 atom이 변경되어도 컴포넌트는 재렌더링되지 않습니다.

상태 변경을 전달하지만 파생 UI는 표시하지 않는 버튼처럼 동작만 수행하는 컴포넌트에 사용하세요.

카운터를 증가시키기 위해 useSetAtom(countAtom)을 호출하는 컴포넌트는 countAtom이 변경되어도 값 구독을 하지 않으므로 재렌더링되지 않습니다. 카운트를 표시하는 컴포넌트만 재렌더링됩니다.

간단하지만 강력한 최적화입니다. 쓰기 컴포넌트와 읽기 컴포넌트를 분리해 연쇄적인 재렌더링을 방지하세요.

jotai/utils에서 atomWithStorage를 가져옵니다. atom()과 똑같이 사용하되 첫 번째 인수로 저장소 키를 전달합니다: atomWithStorage('theme', 'light'). atom은 localStorage와 자동으로 동기화됩니다.

페이지를 새로 고침하면 atom이 localStorage에서 저장된 값을 불러옵니다. atom을 읽는 모든 컴포넌트가 저장된 값을 즉시 반영합니다.

jotai/utils의 RESET 기호를 atomWithStorage로 만든 atom의 setter에 전달할 수 있습니다: setter(RESET). 이렇게 하면 localStorage 항목이 삭제되고 atom이 초기 값으로 재설정됩니다.

로그아웃 흐름이나 설정 페이지의 "기본값으로 재설정" 버튼에 유용합니다.

jotai/utils의 atomFamily는 매개변수화된 atom을 반환하는 팩토리를 만듭니다. 예를 들어 atomFamily(id => atom(null))은 전달된 각 고유 id마다 별도의 atom을 만듭니다.

하나의 거대한 맵 atom을 관리하지 않고 selectedAtom(itemId)이나 expandedAtom(rowId)처럼 항목별 상태를 관리할 때 적합합니다.

ID가 계속 누적되면 atom 패밀리가 제한 없이 커질 수 있습니다. atomFamily.setShouldRemove((createdAt, param) => ...)을 사용해 Jotai가 오래된 패밀리 구성원을 제거할지 결정할 때 호출할 정리 조건을 정의하세요.

항목이 추가되고 삭제되는 목록에서는 메모리 누수를 방지하기 위해 항목이 삭제될 때 atom 패밀리 항목도 항상 정리하세요.

jotai-devtools 패키지는 활성 상태인 모든 atom과 현재 값을 나열하는 시각적 패널을 제공합니다. 패키지를 설치하고 앱을 DevTools로 감싼 다음 atom 상태를 실시간으로 확인하세요.

각 atom 업데이트는 이전 값과 다음 값과 함께 기록되므로 복잡한 atom 상호작용도 쉽게 디버깅할 수 있습니다.

큰 목록에서 ListContainer 컴포넌트는 useSetAtom(selectedIdAtom)을 사용해 selectedIdAtom을 구독하지 않고도 선택 상태를 업데이트할 수 있습니다. 선택 상태가 변경될 때는 useAtomValue(selectedIdAtom)을 호출하는 개별 ListItem 컴포넌트만 재렌더링됩니다.

이 패턴은 확장성이 뛰어납니다. 목록 항목을 수천 개 추가해도 선택 업데이트가 느려지지 않습니다.

컴포넌트의 필요에 맞는 훅을 선택하세요. 순수하게 표시만 할 때는 useAtomValue, 동작만 수행할 때는 useSetAtom, 두 작업이 모두 필요할 때는 useAtom을 사용합니다. 이러한 의도적인 API 설계 덕분에 컴포넌트의 책임을 한눈에 파악할 수 있습니다.

폼 필드 컴포넌트는 일반적으로 useAtom을 사용하고, 제출 버튼은 useSetAtom을 사용하며, 카운트를 표시하는 레이블은 useAtomValue를 사용합니다.

useAtom 대신 useSetAtom을 사용할 때의 핵심 장점은 무엇인가요?

useAtom은 값과 setter를 모두 제공하고, useAtomValue는 값만 제공하며 읽기 구독을 설정하고, useSetAtom은 setter만 제공하므로 값이 변경되어도 재렌더링되지 않습니다. atomWithStorage는 RESET을 지원하면서 값을 localStorage에 저장하고, atomFamily는 동적 목록을 위한 매개변수별 atom을 만듭니다.

적절한 훅을 선택하면 불필요한 재렌더링을 최소화하고 컴포넌트의 의도를 명확하게 표현할 수 있습니다.