리액트 상태 관리, Recoil 이해하기

안녕하세요! 리액트 개발자라면 한 번쯤 상태 관리의 늪에 빠져본 경험이 있으실 겁니다. Prop-drilling의 고통, Redux의 복잡한 보일러플레이트... 생각만 해도 머리가 아파오죠. 🤯

이런 고민을 해결하기 위해 페이스북(현 Meta)에서 직접 선보인 상태 관리 라이브러리, Recoil에 대해 깊이 있게 알아보려 합니다. 이번 포스팅에서는 Recoil이 무엇인지, 왜 우리가 Recoil을 주목해야 하는지, 그리고 기본 사용법부터 실용적인 꿀팁까지 모두 담았습니다.

---

Recoil, 왜 등장했을까요? 🤔

기존의 가장 유명한 상태 관리 라이브러리인 Redux는 강력하지만, 배우기 어렵고 설정이 복잡하다는 단점이 있었습니다. 간단한 상태 하나를 추가하려 해도 액션, 리듀서, 디스패치 등 수많은 보일러플레이트 코드를 작성해야 했죠.

Recoil은 이러한 문제의식에서 출발했습니다. "마치 리액트의 useState를 사용하듯, 간단하고 직관적으로 전역 상태를 다룰 수는 없을까?"라는 생각에서 탄생한 것이죠. Recoil은 리액트의 내부 구조와 매우 흡사하게 동작하여, 리액트 개발자라면 별도의 학습 곡선 없이 자연스럽게 사용할 수 있습니다.

Recoil의 핵심 철학:

• React-ish: 리액트의 철학을 그대로 따릅니다. Hooks와 함께 사용하며, 선언적으로 상태를 관리합니다.
• 간결함 (Minimal & Boilerplate-free): 불필요한 코드를 작성할 필요 없이, atom 하나로 전역 상태를 뚝딱 만들 수 있습니다.
• 파생 데이터 (Derived data): 기존 상태 값을 조합하거나 가공하여 새로운 상태를 만드는 selector 기능이 매우 강력하고 효율적입니다.
• 앱 전체의 상태 관찰: 상태 변화에 따른 리렌더링을 최적화하고, 디버깅을 용이하게 합니다.

---

Recoil의 두 가지 핵심 개념: Atom & Selector

Recoil을 이해하기 위해서는 딱 두 가지만 기억하면 됩니다: atom과 selector.

1. Atom: 상태의 최소 단위 ⚛️

Atom은 상태(state)의 가장 작은 단위입니다. 하나의 atom은 하나의 상태 값을 의미하죠. 컴포넌트들은 이 atom을 구독(subscribe)하고, atom의 값이 변경되면 구독하는 모든 컴포넌트가 리렌더링 됩니다.

마치 리액트의 useState와 비슷하지만, 컴포넌트 내부에 종속되지 않고 앱 어디서든 공유할 수 있는 전역 useState라고 생각하면 쉽습니다.

📋 Atom 예제

// state/todoState.js
import { atom } from 'recoil';

// 할 일 목록을 저장할 atom
export const todoListState = atom({
  key: 'todoListState', // 💥 앱 전체에서 고유해야 하는 키!
  default: [],          // 기본값 (빈 배열)
});

// 할 일 입력창의 텍스트를 관리할 atom
export const todoInputState = atom({
    key: 'todoInputState',
    default: '', // 기본값 (빈 문자열)
});

key는 나중에 상태를 디버깅하거나 특정 상태를 식별할 때 사용되므로, 충돌하지 않도록 명확하게 작성하는 것이 중요합니다.

2. Selector: 파생된 상태 ✨

Selector는 Recoil의 진정한 강력함이 드러나는 부분입니다. selector는 기존 atom이나 다른 selector의 상태 값을 가져와, 그것을 바탕으로 새로운 파생된 데이터(Derived State)를 반환하는 순수 함수입니다.

예를 들어, 전체할 일 목록(atom)에서 '완료된 할 일'의 개수만 따로 계산하고 싶을 때 selector를 사용할 수 있습니다.

가장 중요한 특징은 캐싱(Caching/Memoization) 기능입니다. selector가 의존하는 atom의 값이 변경될 때만 재계산됩니다. 만약 의존하는 상태가 같다면, 이전에 계산했던 값을 그대로 반환하여 불필요한 연산을 막아 성능을 최적화합니다.

📋 Selector 예제

// state/todoState.js
import { selector } from 'recoil';
import { todoListState } from './todoState';

export const todoStatsState = selector({
  key: 'todoStatsState',
  get: ({ get }) => {
    // get 함수를 통해 다른 atom이나 selector의 값을 가져옵니다.
    const todoList = get(todoListState);
    const totalNum = todoList.length;
    const totalCompletedNum = todoList.filter((item) => item.isComplete).length;
    const totalUncompletedNum = totalNum - totalCompletedNum;
    const percentCompleted = totalNum === 0 ? 0 : (totalCompletedNum / totalNum) * 100;

    return {
      totalNum,
      totalCompletedNum,
      totalUncompletedNum,
      percentCompleted,
    };
  },
});

위 예제에서 todoStatsState는 todoListState에 의존합니다. todoListState가 바뀔 때만 통계 계산을 다시 수행하고, 다른 상태가 변경되어도 전혀 영향을 받지 않습니다.

---

Recoil 실전 사용법: A to Z 🔧

1. 설치 및 설정

먼저 프로젝트에 Recoil을 설치합니다.

npm install recoil
# 또는
yarn add recoil

그다음, 앱의 최상위 컴포넌트(보통 App.js나 index.js)를 RecoilRoot로 감싸줍니다. 이렇게 해야 하위 컴포넌트들이 Recoil 상태에 접근할 수 있습니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

2. 컴포넌트에서 상태 사용하기 (feat. Recoil Hooks)

Recoil은 다양한 Hooks를 제공하여 컴포넌트에서 상태를 쉽게 읽고 수정할 수 있도록 돕습니다.

• useRecoilState(atom): useState와 사용법이 완전히 동일합니다. [value, setValue] 배열을 반환하며, 상태를 읽고 업데이트할 때 사용합니다.
• useRecoilValue(atom): 상태의 값만 필요할 때 사용합니다. 컴포넌트가 상태를 수정할 필요가 없다면, 이 Hook을 사용해 불필요한 리렌더링을 방지할 수 있습니다.
• useSetRecoilState(atom): 상태를 변경하는 함수만 필요할 때 사용합니다. 예를 들어, 버튼 클릭 시 상태를 초기화하는 기능에 유용합니다.
• useResetRecoilState(atom): 상태를 default 값으로 초기화할 때 사용합니다.

📋 컴포넌트 활용 예제

앞서 만든 atom과 selector를 활용한 간단한 할 일 관리 앱 예제입니다

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { todoInputState, todoListState, todoStatsState } from './state';

function TodoApp() {
  const [text, setText] = useRecoilState(todoInputState);
  const [todos, setTodos] = useRecoilState(todoListState);
  const { totalNum, totalCompletedNum } = useRecoilValue(todoStatsState);

  const addTodo = () => {
    if (!text) return;
    setTodos((oldTodos) => [
      ...oldTodos,
      { id: Date.now(), text, isComplete: false },
    ]);
    setText(''); // 입력창 초기화
  };

  const toggleTodoCompletion = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo
      )
    );
  };
  
  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="할 일을 입력하세요..."
        />
        <button onClick={addTodo}>추가</button>
      </div>
      
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodoCompletion(todo.id)}
            style={{ textDecoration: todo.isComplete ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>

      <div>
        <h3>통계</h3>
        <p>총 {totalNum}개의 할 일 중 {totalCompletedNum}개 완료!</p>
      </div>
    </div>
  );
}

export default TodoApp;

---

비동기 데이터 처리 🌸

Recoil의 selector는 비동기 작업도 매우 우아하게 처리할 수 있습니다. get 함수 내에서 Promise를 반환하면 Recoil이 알아서 데이터를 처리해 줍니다. 이는 서버 API 호출 결과를 상태로 관리할 때 특히 유용합니다.

리액트의 <Suspense>와 함께 사용하면 로딩 상태를 선언적으로 관리할 수 있습니다.

📋 비동기 Selector 예제

// state/userState.js
import { atom, selector } from 'recoil';

// 현재 조회할 사용자의 ID를 저장하는 atom
export const currentUserIDState = atom({
  key: 'currentUserIDState',
  default: 1,
});

// 사용자 ID를 기반으로 API를 호출하여 사용자 정보를 가져오는 비동기 selector
export const currentUserInfoQuery = selector({
  key: 'currentUserInfoQuery',
  get: async ({ get }) => {
    const userID = get(currentUserIDState);
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userID}`);
    if (!response.ok) {
      throw new Error('Failed to fetch user.');
    }
    const userData = await response.json();
    return userData;
  },
});

💻 컴포넌트에서 비동기 데이터 사용하기

import React, { Suspense } from 'react';
import { useRecoilValue } from 'recoil';
import { currentUserInfoQuery, currentUserIDState } from './state/userState';

function UserInfo() {
  // 비동기 selector는 데이터가 로딩 중일 때 컴포넌트를 Suspense 시킵니다.
  const currentUser = useRecoilValue(currentUserInfoQuery);
  
  return (
    <div>
      <h2>User Info</h2>
      <p><strong>Name:</strong> {currentUser.name}</p>
      <p><strong>Email:</strong> {currentUser.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      {/* Suspense는 하위 컴포넌트의 비동기 작업이 끝날 때까지 fallback UI를 보여줍니다. */}
      <Suspense fallback={<div>Loading...</div>}>
        <UserInfo />
      </Suspense>
    </div>
  );
}

---

더 똑똑하게 Recoil 사용하기: 꿀팁 & 주의사항 📝

1. 고유하고 일관된 Key 사용하기 모든 atom과 selector의 key는 앱 전체에서 고유해야 합니다. 디버깅과 상태 관리를 용이하게 하려면 '모듈명/상태이름'과 같이 일관된 네이밍 규칙을 정하는 것이 좋습니다. (예: 'todo/listState')
2. 불필요한 리렌더링 최소화 상태를 읽기만 하는 컴포넌트에서는 useRecoilValue를, 상태를 쓰기만 하는 컴포넌트에서는 useSetRecoilState를 사용하세요. useRecoilState는 값이나 세터 함수가 변경될 때마다 리렌더링을 유발할 수 있으므로 꼭 필요할 때만 사용하는 것이 성능에 유리합니다.
3. 상태 동기화를 위한 atomEffects atomEffects는 atom의 상태가 변경될 때 특정 부수 효과(side 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 todoListState = atom({
     key: 'todoListState',
     default: [],
     effects: [
       localStorageEffect('todo_list'),
     ]
   });
   

4. 개발자 도구 활용 Recoilize와 같은 브라우저 확장 프로그램을 사용하면 Recoil 상태 트리, 상태 값의 변화, 의존성 그래프 등을 시각적으로 확인할 수 있어 디버깅이 훨씬 쉬워집니다. 🛠️

---

마무리하며 🎉

Recoil은 리액트 애플리케이션의 복잡한 상태 관리를 단순하고 우아하게 만들어주는 혁신적인 도구입니다. 간결한 코드, 높은 유연성, 그리고 리액트와의 완벽한 통합은 개발자들이 더 중요한 비즈니스 로직에 집중할 수 있도록 도와줍니다.

아직 Recoil을 사용해 보지 않으셨다면, 다음 프로젝트에 꼭 한번 적용해 보세요. 리액트 상태 관리의 새로운 패러다임을 경험하게 될 것입니다!