Recoil: React 상태 관리의 새로운 패러다임

React 애플리케이션의 규모가 커지면서 상태 관리는 개발의 핵심적인 과제가 되었습니다. 기존의 Redux나 MobX와 같은 훌륭한 라이브러리들이 있지만, 때로는 설정의 복잡성이나 러닝 커브 때문에 작은 프로젝트에 도입하기 부담스러울 때가 있습니다. 바로 이러한 고민을 해결하기 위해 Facebook에서 직접 개발한 상태 관리 라이브러리가 Recoil입니다.

이 글에서는 Recoil이 무엇인지, 왜 등장했는지부터 시작하여 기초 개념인 Atom과 Selector의 사용법을 익히고, 나아가 비동기 처리, 상태 동기화와 같은 심화 주제까지 깊이 있게 탐구해 보겠습니다. 이 글을 끝까지 읽으신다면 Recoil을 활용하여 복잡한 React 애플리케이션의 상태를 얼마나 간결하고 효율적으로 관리할 수 있는지 완벽하게 이해하게 될 것입니다.

---

1. Recoil의 등장 배경: 왜 새로운 상태 관리 라이브러리가 필요했을까?

Recoil을 이해하기 전에 먼저 기존 상태 관리 방식의 한계를 짚어볼 필요가 있습니다.

• 컴포넌트 트리를 통한 props 전달 (Prop Drilling): 가장 기본적인 React의 상태 전달 방식입니다. 하지만 상태가 필요한 컴포넌트가 최상위 컴포넌트와 멀리 떨어져 있을 경우, 중간에 있는 수많은 컴포넌트들이 오직 상태를 전달하기 위한 목적으로 props를 받아야 하는 'Prop Drilling' 현상이 발생합니다. 이는 코드의 가독성을 해치고 유지보수를 어렵게 만듭니다.
• Context API: React에 내장된 Context API는 Prop Drilling 문제를 해결하기 위해 등장했습니다. 전역적인 상태를 만들어 필요한 컴포e넌트에서 직접 접근할 수 있게 해 주죠. 하지만 Context는 상태가 변경될 때 해당 Context를 구독하는 모든 컴포넌트가 리렌더링 되는 단점이 있습니다. 상태의 일부만 사용하는 컴포넌트까지 불필요하게 리렌더링 되어 성능 저하의 원인이 될 수 있습니다.
• Redux: Redux는 오랫동안 React 생태계의 표준처럼 여겨져 온 강력한 상태 관리 라이브러리입니다. 하지만 Action, Reducer, Store, Middleware 등 배워야 할 개념이 많고, 간단한 상태 하나를 추가하더라도 작성해야 하는 보일러플레이트 코드가 상당합니다. 이로 인해 개발 속도가 저하되고 입문자에게 높은 장벽으로 느껴지기도 합니다.

Recoil은 바로 이러한 문제들을 해결하고, 더 'React'스러운 방식으로 상태를 관리하기 위해 탄생했습니다. React의 useState 훅처럼 간단하게 시작할 수 있으면서도, 대규모 애플리케이션에서도 유연하고 강력하게 상태를 관리할 수 있는 도구를 제공하는 것이 Recoil의 핵심 철학입니다.

---

2. Recoil의 핵심 개념: Atom과 Selector

Recoil의 API는 매우 직관적이고 간단합니다. 그 중심에는 Atom과 Selector라는 두 가지 핵심 개념이 있습니다.

Atom: 상태의 최소 단위

Atom은 Recoil에서 상태의 가장 작은 단위입니다. 마치 React의 useState처럼 하나의 상태 값을 가지며, 어떤 컴포넌트든 이 Atom을 구독하여 값을 읽고 업데이트할 수 있습니다. Atom의 값이 변경되면, 해당 Atom을 구독하고 있는 모든 컴포넌트들이 자동으로 리렌더링됩니다.

Atom을 생성하는 방법은 매우 간단합니다.

// store/atoms.ts
import { atom } from 'recoil';

export const todoListState = atom<string[]>({
  key: 'todoListState', // 애플리케이션 전체에서 고유한 키
  default: [],         // 기본값
});

• key: 생성된 Atom을 식별하기 위한 고유한 문자열입니다. 이 키는 애플리케이션 전체에서 유일해야 합니다.
• default: 해당 Atom의 초기값을 의미합니다.

이제 컴포넌트에서 이 Atom을 사용해 보겠습니다. Recoil은 React 훅과 유사한 API를 제공하여 쉽게 상태를 사용하고 조작할 수 있습니다.

// components/TodoList.jsx
import { useRecoilState } from 'recoil';
import { todoListState } from '../store/atoms';

function TodoList() {
  // useState와 매우 유사한 방식
  const [todos, setTodos] = useRecoilState(todoListState);
  
  // ... (아이템 추가, 삭제 로직)
}

useRecoilState 훅은 useState와 똑같이 [값, 업데이트 함수] 형태의 배열을 반환합니다. 이 외에도 값만 필요할 때는 useRecoilValue, 업데이트 함수만 필요할 때는 useSetRecoilState를 사용하여 불필요한 리렌더링을 방지할 수 있습니다.

Selector: 파생된 상태 (Derived State)

Selector는 Recoil의 진정한 강력함이 드러나는 부분입니다. Selector는 기존 Atom이나 다른 Selector의 상태를 입력받아 **새로운 파생된 데이터(Derived State)**를 만들어내는 순수 함수입니다.

예를 들어, 전체할 일 목록(todoListState)에서 완료되지 않은 할 일의 개수만 따로 계산하고 싶다고 가정해 봅시다. 이럴 때 Selector를 사용할 수 있습니다.

// store/selectors.ts
import { selector } from 'recoil';
import { todoListState } from './atoms';

export const uncompletedTodoCountState = selector<number>({
  key: 'uncompletedTodoCountState',
  get: ({ get }) => {
    // get 함수를 통해 다른 atom이나 selector의 값을 가져올 수 있다.
    const todoList = get(todoListState);
    return todoList.filter(item => !item.isCompleted).length;
  },
});

• key: Selector를 식별하기 위한 고유한 키입니다.
• get: 파생된 데이터를 계산하는 순수 함수입니다. get 프로퍼티의 콜백 함수는 get이라는 인자를 받는데, 이를 통해 다른 Atom이나 Selector의 최신 값에 접근할 수 있습니다.

Recoil은 의존성 그래프를 자동으로 추적합니다. 즉, uncompletedTodoCountState는 todoListState에 의존하고 있으므로, todoListState가 변경될 때만 get 함수가 재실행되어 값을 다시 계산합니다. 만약 관련 없는 다른 Atom이 변경되더라도 이 Selector는 재계산되지 않아 뛰어난 성능을 보장합니다.

컴포넌트에서는 Selector를 읽기 전용 값처럼 useRecoilValue로 구독하여 사용할 수 있습니다.

// components/TodoStats.jsx
import { useRecoilValue } from 'recoil';
import { uncompletedTodoCountState } from '../store/selectors';

function TodoStats() {
  const count = useRecoilValue(uncompletedTodoCountState);
  
  return <div>남은 할 일: {count}개</div>;
}

이처럼 Selector를 사용하면 상태 로직을 컴포넌트로부터 분리하여 재사용 가능하고 관리하기 쉬운 형태로 만들 수 있습니다.

---

3.Recoil 제대로 활용하기

Atom과 Selector의 기본 개념을 이해했다면, 이제 Recoil을 더욱 강력하게 만들어주는 심화 기능들을 알아볼 차례입니다.

비동기 데이터 처리 (Asynchronous Selectors)

현대 웹 애플리케이션에서 비동기 데이터 요청은 필수적입니다. Recoil의 Selector는 async/await를 지원하여 비동기 로직을 매우 우아하게 처리할 수 있습니다.

get 함수를 async로 만들면, Promise를 반환하는 비동기 작업을 수행할 수 있습니다. Recoil은 내부적으로 React Suspense와 연동하여 데이터가 로딩 중일 때 fallback UI를 보여주고, 로딩이 완료되면 컴포넌트를 렌더링 합니다.

// store/selectors.ts
import { selector } from 'recoil';
import axios from 'axios';

export const userState = selector({
  key: 'userState',
  get: async ({ get }) => {
    // 다른 atom의 값에 따라 API 요청을 동적으로 변경할 수도 있다.
    // const userId = get(currentUserIDState); 
    
    try {
      const response = await axios.get(`https://api.example.com/user/1`);
      return response.data;
    } catch (error) {
      throw error; // 에러 발생 시 Error Boundary로 전파
    }
  },
});

컴포넌트에서는 이 비동기 Selector를 일반 Selector와 똑같이 사용하면 됩니다. 데이터 로딩 상태 관리를 위해 별도의 isLoading, error 상태를 만들 필요 없이, React Suspense와 Error Boundary를 조합하여 선언적으로 처리할 수 있습니다.

// components/UserInfo.jsx
import { Suspense } from 'react';
import { useRecoilValue } from 'recoil';
import { userState } from '../store/selectors';

function UserInfoComponent() {
  const user = useRecoilValue(userState);
  return <div>사용자 이름: {user.name}</div>;
}

function UserInfo() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <UserInfoComponent />
    </Suspense>
  );
}

상태와 액션을 모두 필요로 할 때: useRecoilCallback

때로는 특정 이벤트가 발생했을 때 Recoil 상태를 읽거나 업데이트해야 하지만, 해당 컴포넌트를 리렌더링 시키고 싶지는 않은 경우가 있습니다. 예를 들어, 버튼 클릭 시 현재 상태를 기반으로 API 요청을 보내는 경우가 그렇습니다.

이때 useRecoilCallback 훅을 사용하면, 컴포넌트가 특정 Recoil 상태를 구독(리렌더링) 하지 않으면서도 필요할 때 상태의 스냅숏을 읽거나 상태를 변경하는 함수를 만들 수 있습니다.

import { useRecoilCallback } from 'recoil';
import { todoListState } from '../store/atoms';

function TodoListLogger() {
  const logTodos = useRecoilCallback(({ snapshot }) => async () => {
    // loadable을 통해 비동기 selector의 상태(loading, hasValue, hasError)도 알 수 있다.
    const todoList = await snapshot.getPromise(todoListState);
    console.log('현재 할 일 목록:', todoList);
  });

  return <button onClick={logTodos}>현재 목록 콘솔에 기록</button>;
}

snapshot 객체는 콜백이 실행되는 시점의 Recoil 상태를 담고 있어, 안전하게 상태를 읽어올 수 있습니다.

상태 지속성 및 동기화: Atom Effects

사용자가 설정한 테마나 로그인 정보 등은 페이지를 새 로고침해도 유지되어야 합니다. Recoil은 Atom Effects라는 강력한 부수 효과 API를 제공하여 Atom의 상태를 외부 스토리지(localStorage, sessionStorage 등)와 동기화하거나 다른 부수적인 작업을 처리할 수 있게 해 줍니다.

atom을 정의할 때 effects 배열을 추가하여 이 기능을 활성화할 수 있습니다.

import { atom } from 'recoil';

// localStorage와 동기화하는 간단한 effect
const localStorageEffect = key => ({ setSelf, onSet }) => {
  const savedValue = localStorage.getItem(key);
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
  }

  onSet((newValue, _, isReset) => {
    isReset
      ? localStorage.removeItem(key)
      : localStorage.setItem(key, JSON.stringify(newValue));
  });
};

export const themeState = atom<'light' | 'dark'>({
  key: 'themeState',
  default: 'light',
  effects: [
    localStorageEffect('theme'),
  ],
});

• setSelf: Atom이 처음 초기화될 때 호출되며, 스토리지의 값으로 Atom 상태를 설정합니다.
• onSet: Atom의 상태가 변경될 때마다 호출되며, 변경된 값을 스토리지에 저장합니다.

이처럼 Atom Effects를 활용하면 상태 관리 로직과 동기화 로직을 Atom 정의 내에 캡슐화하여 코드의 응집도를 높일 수 있습니다. (서드파티 라이브러리인 recoil-persist나 recoil-sync를 사용하면 더 간편하게 구현할 수도 있습니다.)

---

4. 결론: Recoil, 당신의 다음 프로젝트를 위한 선택

Recoil은 React의 철학을 계승하여 배우기 쉽고 간결하면서도, 대규모 애플리케이션의 복잡한 상태까지 효과적으로 관리할 수 있는 강력한 도구입니다.

• 낮은 러닝 커브: useState와 유사한 API로 React 개발자라면 누구나 쉽게 시작할 수 있습니다.
• 최소한의 보일러플레이트: Redux와 비교하여 훨씬 적은 양의 코드로 상태를 관리할 수 있습니다.
• 성능 최적화: 상태 변경 시 해당 상태를 구독하는 컴포넌트만 정확히 리렌더링 하여 불필요한 렌더링을 방지합니다.
• 강력한 비동기 처리: React Suspense와 자연스럽게 통합되어 비동기 로직을 선언적이고 깔끔하게 작성할 수 있습니다.

물론 Recoil이 모든 프로젝트의 만병통치약은 아닐 수 있습니다. 매우 복잡한 미들웨어가 필요하거나, 정형화된 액션-디스패치 패턴이 팀에 더 적합한 경우 Redux가 여전히 좋은 선택일 수 있습니다.

하지만 대부분의 React 프로젝트에서 Recoil은 개발 생산성과 애플리케이션 성능이라는 두 마리 토끼를 모두 잡을 수 있는 훌륭한 대안이 될 것입니다. 당신의 다음 프로젝트에 Recoil을 도입하여, 직관적이고 즐거운 상태 관리의 세계를 경험해 보시길 바랍니다.