Recoil

---

🧠 Recoil이란?

정의

Recoil은 React 애플리케이션에서 전역 상태를 관리하기 위한 상태 관리 라이브러리다.

컴포넌트 간 상태 공유를 쉽게 하고, 상태를 atom 단위로 나눠 관리할 수 있다.

🧩 주요 특징

• 전역 상태를 비교적 간단하게 다룰 수 있다.
• atom과 selector로 상태를 선언적으로 관리한다.
• React 컴포넌트와 자연스럽게 연결된다.
• 파생 상태나 비동기 상태를 다루기 좋다.

🛠️ 기본 구성

Atom

• 상태를 저장하는 기본 단위다.
• 여러 컴포넌트에서 공유할 수 있다.

import { atom } from "recoil";

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

Selector

• atom 값을 가공한 파생 상태를 만들 때 사용한다.
• 계산 결과나 읽기 전용 상태를 만들기 좋다.

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

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

RecoilRoot

• Recoil 상태를 사용하려면 애플리케이션 상단에 RecoilRoot를 감싼다.

import { RecoilRoot } from "recoil";

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

🧪 상태 사용 예시

import { useRecoilState, useRecoilValue } from "recoil";
import { countState, doubleCountState } from "./atoms";

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  const doubleCount = useRecoilValue(doubleCountState);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double Count: {doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

⚖️ Recoil과 Redux

항목	Recoil	Redux
설정	비교적 간단하다	구조가 더 크다
상태 단위	atom 중심	store, reducer 중심
파생 상태	selector로 다루기 쉽다	별도 패턴이 필요하다
학습 곡선	비교적 낮다	상대적으로 높다

장점과 단점

장점

• 상태 선언이 간단하다.
• 컴포넌트와 잘 맞는다.
• 파생 상태를 관리하기 쉽다.

단점

• 규모가 커지면 설계를 잘 잡아야 한다.
• Redux보다 생태계가 작다.
• 상태 흐름이 복잡해지면 구조가 흐려질 수 있다.

📌 정리

• Recoil은 React 전역 상태 관리를 간단하게 해주는 라이브러리다.
• atom, selector, RecoilRoot를 먼저 이해하면 된다.
• useState, useEffect, Props와 함께 비교해 보면 상태 흐름이 잘 보인다.

---

연결문서

• React-Component
• React-Keyword
• React-Props
• useEffect