atomFamily 란?

[asdfqaz74]

atomFamily는 Jotai 라이브러리의 유틸리티 함수로, 유사한 구조를 가진 atom들을 동적으로 생성하는 데 사용됩니다. atomFamily를 사용하면, 주어진 파라미터에 따라 고유한 atom을 생성할 수 있으며, 이러한 방식으로 코드의 중복을 줄이고 효율적인 상태 관리를 할 수 있습니다.

atomFamily의 역할

파라미터 기반 동적 atom 생성

atomFamily는 함수를 인자로 받으며, 이 함수는 atomFamily에 전달된 파라미터에 기반하여 atom을 생성하는 로직을 포함합니다. 이를 통해 동일한 구조를 가진 atom을 필요에 따라 여러 개 생성할 수 있습니다.

상태 재사용 및 메모이제이션

atomFamily는 내부적으로 생성된 atom을 캐싱하고, 동일한 파라미터로 atomFamily가 다시 호출될 때 캐싱된 atom을 재사용합니다. 이는 성능 최적화에 도움이 되며, 불필요한 상태 생성을 방지합니다.

상태 고립

atomFamily로 생성된 각 atom은 고유한 상태를 갖습니다. 따라서, 한 atom의 상태 변경이 다른 atom에 영향을 미치지 않아 상태 관리가 용이합니다.

유연한 상태 관리

atomFamily는 다양한 상황에서 유연하게 상태를 관리할 수 있게 해줍니다. 예를 들어, 리스트 아이템별 상태 관리, 동적 폼 필드 관리 등 복잡한 상태 관리 요구 사항에 적합합니다.

isEqual 비교 함수

atomFamily의 두 번째 인자로 전달된 isEqual 함수는 atomFamily에 의해 생성된 atom들의 파라미터 비교에 사용됩니다. lodash의 isEqual 함수와 같은 깊은 비교(deep comparison) 함수를 사용하면, 파라미터가 객체와 같은 복잡한 데이터 구조일 때도 정확한 비교가 가능합니다. 이를 통해 파라미터가 동일한 경우에만 캐싱된 atom을 재사용하도록 보장합니다.

atomFamily 사용예시

import { Suspense } from "react";
import { getList } from "./api";
import { atom, useAtom } from "jotai";
import { atomFamily } from "jotai/utils";
import { ErrorBoundary } from "react-error-boundary";
import isEqual from 'lodash/isEqual';
import { useSearchParams } from "react-router-dom";

// 리스트 컴포넌트 정의
const List = () => {
  const [params] = useSearchParams();
  const page = Number(params.get('page') || '0');
  // 현재 페이지에 해당하는 데이터를 가져옴
  const [pokeData] = useAtom(pokeDataAtomFamily(page));

  // 가져온 데이터를 리스트로 표시
  return (
    <ul>
      {pokeData.results.map((item) => {
        return <li key={item.name}>{item.name}</li>;
      })}
    </ul>
  );
};

// 페이지네이터 컴포넌트 정의
const Paginator = () => {
  const [params, setParams] = useSearchParams();
  const page = Number(params.get("page") || "0");
  const setPage = (page: number) => setParams({ page: page.toString() });

  // 페이지 변경 버튼
  return (
    <>
      <button onClick={() => setPage(page - 1)}>-</button>
      <span>{page}</span>
      <button onClick={() => setPage(page + 1)}>+</button>
    </>
  );
};

// atomFamily를 사용하여 페이지 번호에 따라 다른 데이터를 가져오는 아톰 정의
const pokeDataAtomFamily = atomFamily((page: number) => {
  // 비동기 작업을 수행하는 아톰 정의
  const pokeDataAtom = atom(async () => {
    const data = await getList(page);
    return data;
  });
  return pokeDataAtom;
}, isEqual);

const Case4 = () => {
  // 에러 바운더리와 서스펜스를 사용하여 에러 핸들링 및 로딩 상태 처리
  return (
    <>
      <ErrorBoundary fallback={<>에러</>}>
        <Suspense fallback='로딩중'>
          <List />
        </Suspense>
      </ErrorBoundary>
      <Paginator />
    </>
  );
};

export default Case4;

이 코드에서 atomFamily가 쓰인 방법

const pokeDataAtomFamily = atomFamily((page: number) => {
  const pokeDataAtom = atom(async () => {
    const data = await getList(page);
    return data;
  });
  return pokeDataAtom;
}, isEqual);

위 코드에서 pokeDataAtomFamily는 페이지 번호를 인자로 받아서, 해당 페이지의 데이터를 비동기적으로 불러오는 작업을 수행하는 새로운 atom을 반환합니다. getList(page) 함수는 외부 API나 데이터 소스로부터 데이터를 가져오는 비동기 함수일 수 있습니다.

파라미터

page는 atomFamily에 의해 생성되는 각 atom을 구별하는 데 사용되는 파라미터입니다. 페이지 번호에 따라 각기 다른 데이터를 가져오는 atom이 생성됩니다.

비동기 작업

atom(async () => { ... })을 통해 비동기 작업을 수행하며, 이는 주로 외부 데이터 소스로부터 데이터를 가져오는 데 사용됩니다. await getList(page)를 통해 실제 데이터를 비동기적으로 불러옵니다.

isEqual

atomFamily의 두 번째 인자로 전달된 isEqual 함수는 atomFamily에 의해 생성되는 atom이 재사용될 조건을 결정합니다. 여기서는 lodash 라이브러리의 isEqual 함수가 사용되었으며, 이는 주어진 두 파라미터가 동일한지 깊은 비교를 수행하여 판단합니다. 이를 통해 동일한 페이지 번호로 pokeDataAtomFamily를 여러 번 호출하더라도, 같은 페이지에 대한 요청은 동일한 atom을 재사용하게 됩니다.