파생 Atom과 비동기 Atom

getter 함수를 전달해 파생 atom을 만들 수 있습니다: const doubleAtom = atom(get => get(countAtom) * 2). 이 atom에는 저장된 값이 없으며 countAtom이 변경될 때마다 다시 계산됩니다.

파생 atom은 수동 동기화 없이 항상 최신 상태를 유지합니다. Jotai에서 계산된 속성에 해당하는 기능입니다.

Jotai는 getter 함수 내부에서 어떤 atom에 접근했는지 추적하고, 해당 atom이 변경되면 파생 atom을 자동으로 다시 계산합니다. 의존성을 명시적으로 선언할 필요가 없습니다.

getter가 get(atomA)와 get(atomB)를 호출하면 atomA 또는 atomB 중 하나가 변경될 때마다 파생 atom이 업데이트됩니다.

쓰기 가능한 파생 atom에는 getter와 setter가 모두 있습니다: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). 읽으면 변환된 값을 제공하고, 쓰면 값을 변환해 다시 저장합니다.

이 패턴을 사용하면 baseAtom을 직접 노출하지 않고 양방향 데이터 변환을 구현할 수 있습니다.

getter 함수는 비동기 함수일 수 있습니다: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai는 atom getter에서 반환되는 프로미스를 기본적으로 지원합니다.

userIdAtom이 변경되면 Jotai가 비동기 getter를 자동으로 다시 실행하고, 데이터를 가져오는 동안 이를 사용하는 컴포넌트가 일시 중단됩니다.

비동기 atom은 React Suspense와 자연스럽게 통합됩니다. 사용하는 컴포넌트를 대체 UI가 있는 Suspense 경계로 감싸세요. 프로미스가 처리되는 동안 컴포넌트가 일시 중단되었다가 프로미스가 완료되면 렌더링됩니다.

이렇게 하면 컴포넌트에서 로딩 상태를 수동으로 관리할 필요가 없습니다. isLoading 플래그도, 데이터를 가져오기 위한 useEffect도 필요하지 않습니다.

jotai/utils에서 loadable을 가져옵니다. 비동기 atom을 감쌉니다: const loadableUserAtom = loadable(userAtom). loadableUserAtom을 읽는 컴포넌트는 일시 중단되지 않고 {state: 'loading'}, {state: 'hasData', data: user}, 또는 {state: 'hasError', error}를 받습니다.

Suspense 경계에 의존하지 않고 사용자 지정 불러오는 중 상태를 인라인으로 렌더링해야 할 때 loadable을 사용하세요.

jotai/utils의 atomWithReset 유틸리티는 RESET 기호를 사용해 초기 값으로 재설정할 수 있는 atom을 만듭니다. 초기 값을 수동으로 추적하고 다시 적용하는 것보다 더 깔끔합니다.

폼에서는 하나의 핸들러에서 각 필드 atom의 setter에 RESET을 전달해 제출하거나 취소할 때 모든 필드 atom을 초기화할 수 있습니다.

파생 atom은 여러 다른 atom에서 값을 읽을 수 있습니다: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). 이렇게 하면 어떤 의존성이 변경되든 업데이트되는 하나의 안정적인 참조가 만들어집니다.

요약만 필요한 컴포넌트는 세 개의 개별 atom 모두가 아니라 summaryAtom을 구독하면 됩니다.

파생 atom은 조건에 따라 서로 다른 atom을 읽을 수 있습니다: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). modeAtom이 전환되면 파생 atom이 데이터 소스를 자동으로 전환합니다.

Jotai는 평가할 때마다 올바른 atom을 다시 구독하므로 비활성 분기의 오래된 데이터가 남지 않습니다.

비동기 atom의 getter에서 오류가 발생하거나 거부되면 Suspense와 함께 사용할 때 오류가 가장 가까운 React 오류 경계로 전파됩니다. loadable을 사용하면 인라인 처리를 위해 state.error 필드에 오류가 나타납니다.

운영 코드에서는 항상 비동기 atom을 ErrorBoundary 또는 loadable 래퍼와 함께 사용하세요.

파생 atom은 마지막 결과를 메모이즈합니다. 모든 의존성 atom이 이전 평가와 동일한 값을 반환하면 파생 atom은 같은 참조를 반환하므로 하위 컴포넌트가 재렌더링되지 않습니다.

비용이 큰 파생 작업, 예를 들어 대규모 배열 변환에서는 추가 설정 없이도 이 메모이제이션이 상당한 성능 향상을 제공합니다.

프로미스가 처리 중일 때 비동기 atom을 읽는 컴포넌트에는 어떤 일이 일어나나요?

파생 atom은 자동 의존성 추적 기능이 있는 getter 함수를 사용해 다른 atom에서 값을 계산합니다. 비동기 atom은 비동기 getter를 사용하며 기본적으로 React Suspense와 통합됩니다. Suspense를 사용하지 않고 로딩 및 오류 상태를 인라인으로 처리하려면 jotai/utils의 loadable을 사용하세요.

쓰기 가능한 파생 atom은 양방향 변환을 지원하고, 조건부 atom은 다른 atom의 값에 따라 데이터 소스를 동적으로 전환합니다.