Recoilatom부터 selectorFamily까지, 상태 관리를 쉽게 이해해보자

Recoil atom부터 selectorFamily까지, 상태 관리를 쉽게 이해해보자

React에서 상태 관리 라이브러리를 고민하고 있다면, Recoil을 들어봤을 거예요. Recoil은 Facebook에서 만든 상태 관리 라이브러리로, atom과 selector를 기반으로 간단하고 명확한 상태 흐름을 만들어줍니다.

이 글에서는 Recoil의 핵심 개념인 atom, selector, selectorFamily, atomFamily에 대해 차근차근 설명하고, 어떤 상황에서 어떻게 쓰는 것이 좋은지도 함께 살펴봅니다.

🟡 atom: 상태의 최소 단위

atom은 Recoil에서 가장 기본적인 상태 단위입니다. React의 useState처럼 쓰되, 전역에서 공유할 수 있다는 차이점이 있어요.

import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

Recoil 훅을 통해 다음과 같이 사용할 수 있어요.

const [count, setCount] = useRecoilState(countState);

🔵 selector: 파생된 상태 만들기

selector는 하나 이상의 atom이나 다른 selector를 기반으로 계산된 값을 반환합니다.

import { selector } from 'recoil';
import { countState } from './atoms';

export const doubleCountState = selector({
  key: 'doubleCountState',
  get: ({ get }) => get(countState) * 2,
});

읽기 전용이지만, set 함수를 정의하면 쓰기 가능한 selector도 만들 수 있어요.

export const doubleCountControl = selector({
  key: 'doubleCountControl',
  get: ({ get }) => get(countState) * 2,
  set: ({ set }, newValue) => {
    set(countState, newValue / 2);
  },
});

🧩 selectorFamily: 파라미터가 필요한 selector

selectorFamily는 파라미터를 받아 동적으로 selector를 생성할 수 있습니다. 예를 들어, 사용자 ID에 따라 데이터를 가져오는 경우 유용합니다.

import { selectorFamily } from 'recoil';

export const userInfoQuery = selectorFamily({
  key: 'userInfoQuery',
  get: (userId: number) => async () => {
    const response = await fetch(`/api/users/${userId}`);
    return await response.json();
  },
});

컴포넌트 안에서는 이렇게 사용할 수 있어요.

const user = useRecoilValue(userInfoQuery(1));

🔷 atomFamily: 파라미터별로 독립적인 atom 만들기

atomFamily는 selectorFamily와 유사하지만, 상태 자체를 저장하는 역할을 합니다. 예를 들어 여러 Todo 항목을 각각의 상태로 관리할 수 있어요.

import { atomFamily } from 'recoil';

export const todoItemState = atomFamily({
  key: 'todoItemState',
  default: (id: number) => ({
    id,
    text: '',
    completed: false,
  }),
});

const [todo, setTodo] = useRecoilState(todoItemState(1));

🧠 마무리: 언제 무엇을 써야 할까?

개념	설명	이럴때 적합할 수 있어요
atom	전역 상태 단위	기본 전역 상태가 필요할 때
selector	상태 가공 및 계산	atom 기반 계산이 필요할 때
selectorFamily	파라미터 기반 계산 selector	동적으로 다른 계산 결과가 필요할 때
atomFamily	파라미터 기반 상태 저장소	각 인스턴스별 독립된 상태가 필요할 때

📌 마치며

Recoil은 작은 앱부터 큰 앱까지 모두 적용할 수 있는 유연한 상태 관리 도구입니다. 특히 selectorFamily와 atomFamily는 반복되는 코드와 복잡한 상태 처리를 단순화하는 데 큰 도움이 됩니다.

이 글이 Recoil을 처음 접하는 분이나, 조금 더 구조적인 사용법이 궁금했던 분들에게 도움이 되었길 바랍니다.