Recoil atom만 써봤다면 주목! isLoading, isError와 작별하는 비동기 처리 실전 패턴 🚀

"서버에서 데이터를 가져와야 하는데... useEffect 안에서 API를 호출하고, 로딩 상태를 위한 useState(true), 에러 상태를 위한 useState(null)을 또 만들어야 하나?"

이런 고민, 다들 한 번쯤 해보셨을 겁니다. 컴포넌트는 순식간에 지저분한 상태 값들로 가득 차고, 비동기 로직은 여기저기 흩어져 유지보수를 어렵게 만듭니다.

오늘은 바로 이 문제를 해결하기 위해 Recoil의 진짜 강력함, 비동기 selector와 selectorFamily를 활용하여 서버 상태를 얼마나 깔끔하게 관리할 수 있는지 알려드릴게요. 이 글을 다 읽고 나면, 여러분의 코드는 훨씬 선언적일겁니다.

---

왜 useEffect + useState 조합은 괴로운가?

우리가 API 통신을 할 때 보통 이런 코드를 작성합니다.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생!</div>;

  return <div>{user.name}</div>;
}

이 코드의 문제점은 명확합니다.

1. 반복적인 보일러플레이트: API를 호출할 때마다 isLoading, error, data 상태 3종 세트를 만들어야 합니다.
2. 명령형 코드: "로딩 시작하고, 데이터 가져오고, 성공하면 데이터 넣고, 끝나면 로딩 끝내고..." 와 같이 과정을 하나하나 명령하고 있습니다.
3. 상태 분리의 어려움: 이 데이터가 다른 컴포넌트에도 필요하다면? 상태를 부모로 끌어올리는 'Props Drilling' 지옥이 시작됩니다.

---

비동기 selector로 서버 데이터를 '상태'처럼 다루기

selector는 다른 atom이나 selector를 기반으로 새로운 파생 데이터를 만드는 역할만 한다고 알고 계셨나요? 사실 selector의 get 함수는 Promise를 반환할 수 있습니다. 즉, 비동기 API 호출 로직을 selector 안에 그대로 넣을 수 있다는 뜻이죠!

// atoms.js
import { selector } from 'recoil';
import axios from 'axios';

// 💡 'userState'라는 이름의 비동기 selector
export const userState = selector({
  key: 'userState',
  get: async () => {
    // try-catch가 필요 없어요! Recoil이 알아서 처리합니다.
    const response = await axios.get('/api/users/1'); 
    return response.data;
  },
});

어라? isLoading이랑 error 상태는 어디 갔죠?" 라고 생각하셨다면 정확합니다. Recoil은 비동기 selector를 사용하는 컴포넌트의 상태를 내부적으로 'loading', 'hasValue', 'hasError' 로 관리합니다.

우리는 이 상태를 React의 Suspense와 ErrorBoundary를 통해 아주 우아하게 처리할 수 있습니다.

 

// UserProfile.jsx
import { Suspense } from 'react';
import { useRecoilValue } from 'recoil';
import { userState } from './atoms';
import ErrorBoundary from './ErrorBoundary'; // 직접 구현하거나 라이브러리 사용

function UserInfo() {
  // 💡 비동기 처리가 끝날 때까지 이 컴포넌트는 '일시 정지' 됩니다.
  const user = useRecoilValue(userState);
  return <h1>{user.name}</h1>;
}

function UserProfile() {
  return (
    <ErrorBoundary fallback={<div>에러가 발생했습니다.</div>}>
      <Suspense fallback={<div>로딩 중입니다...</div>}>
        <UserInfo />
      </Suspense>
    </ErrorBoundary>
  );
}

어떤가요? UserProfile 컴포넌트에서 isLoading, error 상태가 완전히 사라졌습니다. UserInfo 컴포넌트는 데이터가 성공적으로 도착했을 때의 UI만 책임지면 됩니다. 로딩과 에러 처리는 각각 Suspense와 ErrorBoundary에 위임했죠. 이것이 바로 관심사의 분리(Separation of Concerns) 입니다.

---

SelectorFamily로 동적인 데이터 요청하기

"그런데 사용자 ID가 1로 고정되어 있잖아요. ID를 파라미터로 넘겨서 동적으로 데이터를 가져오고 싶어요!"

아주 좋은 질문입니다. 이럴 때 사용하는 것이 바로 selectorFamily 입니다. selectorFamily는 말 그대로 'selector를 만드는 가족(패밀리)' 즉, selector를 반환하는 함수입니다.

개념	설명
selector	고정된 하나의 파생 상태 값을 정의합니다.
selectorFamily	매개변수를 받아, 그에 맞는 selector를 동적으로 생성합니다.

userId를 파라미터로 받는 userQuery를 만들어 봅시다.

// atoms.js
import { selectorFamily } from 'recoil';
import axios from 'axios';

export const userQuery = selectorFamily({
  key: 'userQuery',
  get: (userId) => async () => { // 💡 파라미터를 받는 함수가 Promise를 반환하는 함수를 리턴
    const response = await axios.get(`/api/users/${userId}`);
    return response.data;
  },
});

이제 컴포넌트에서는 이 userQuery를 마치 함수처럼 호출하여 사용하면 됩니다. Recoil은 userId 별로 API 호출 결과를 자동으로 캐싱해줍니다. 같은 userId로 다시 요청하면 API를 또 호출하지 않고 캐싱된 값을 즉시 반환하죠.

// UserInfo.jsx
function UserInfo({ userId }) {
  // 💡 userQuery에 userId를 전달하여 해당 유저의 데이터를 구독
  const user = useRecoilValue(userQuery(userId)); 
  return <h1>{user.name}</h1>
}

// App.js에서 <UserInfo userId={1} />, <UserInfo userId={2} /> 처럼 사용

서버 상태를 atom에 넣지 마세요

흔히 하는 실수는 useEffect에서 API를 호출한 뒤, 그 결과를 setRecoilState를 이용해 atom에 저장하는 것입니다.

// 👎 안티-패턴
const [users, setUsers] = useRecoilState(usersAtom);

useEffect(() => {
  const response = await axios.get('/api/users');
  setUsers(response.data); // 서버에서 온 데이터를 atom에 직접 저장
}, []);

이 방식은 Recoil을 단순한 useState의 전역 버전으로만 사용하는 것입니다. 서버 상태는 언제든 다시 불러올 수 있고, 캐싱이 필요하며, 로딩/에러 상태를 가집니다. 이런 복잡한 특징을 가진 서버 상태는 atom이 아닌 비동기 selector에 저장하고 관리하는 것이 Recoil의 철학에 더 가깝습니다.

• Client State (클라이언트 상태): 다크 모드 여부, 모달 열림 상태 등 사용자의 인터랙션으로만 변하는 상태 -> atom
• Server State (서버 상태): DB에서 가져오는 데이터, 비동기적으로 변하는 상태 -> 비동기 selector

이 둘을 분리해서 생각하는 것만으로도 상태 관리의 복잡도가 크게 줄어듭니다.

---

오늘은 Recoil의 atom을 넘어, 비동기 selector와 selectorFamily를 통해 서버 상태를 얼마나 효율적으로 관리할 수 있는지 알아봤습니다. 핵심은 isLoading, error 같은 부수적인 상태 관리를 Recoil과 React Suspense에 위임하고, 컴포넌트는 오직 성공했을 때의 UI 렌더링에만 집중하는 것입니다.