🫆 Redux와 Recoil의 차이

최근에 면접을 몇 군데 봤는데, 질문을 받았지만 제대로 답변하지 못했기 때문에 꼭 짚고 넘어가야겠다고 생각한 것 중 하나가 "Redux와 Recoil의 차이"이다. 오늘은 이 부분에 대해 정리하려고 한다.

Redux와 Recoil은 무엇을 위한 것인가

먼저 Redux와 Recoil 모두 리액트에서 상태 관리 를 위해 사용하는 라이브러리이다. 🤔 그럼 상태 관리는 왜 필요한 것일까?

리액트는 단방향으로 바인딩하는 라이브러리이다. 단방향 바인딩이라 함은, 컴포넌트 사이에서 state를 전달할 때 부모 컴포넌트에서 자식 컴포넌트 방향으로만 state를 props로 전달할 수 있다는 것이다.
따라서 이와 반대로 자식 컴포넌트에서 부모 컴포넌트의 state를 바꾸기 위해서는 다음과 같은 방법을 사용한다.

1. 자식 컴포넌트에서 부모 컴포넌트로 state를 수정할 수 있는 핸들러 함수를 props로 넘겨준다.
2. 리액트에서 제공하고 있는 Context API를 사용한다.
3. Redux, Recoil과 같은 상태 관리 라이브러리를 사용한다.

간단한 구조를 가진 애플리케이션이라면 1번 방식을 이용해서 원하는 컴포넌트에서 state를 변경할 수 있도록 구현할 수 있다. 하지만 애플리케이션이 조금만 복잡해져도(애플리케이션 내 depth가 커질수록) 1번 방식을 사용해 상태를 관리하기가 무척 어려워진다. 따라서 3번과 같이 상태 관리 라이브러리를 사용하는 방법이 주를 이루게 되었다.

---

Redux

Redux를 사용하지 않았을 때는 위에서 언급한 것처럼 한 컴포넌트에서 다른 컴포넌트로 가기까지 연결된 모든 컴포넌트들에 props를 전달해야 한다는 특징이 있지만, Redux를 사용하면 Store라는 중앙 저장소를 사용해 상태를 쉽게 저장하고 꺼내올 수 있다.

이처럼 Redux는 여러 컴포넌트에 사용되는 state들을 분리, 통합해 관리할 수 있게 하고, 애플리케이션의 안정성을 높일 수 있는 라이브러리이다.

🧿 MVC 패턴

Redux가 등장하기 전, 프론트엔드 환경에서 데이터의 흐름을 관리하는 방식은 MVC 패턴 이었다.

• Model - 데이터의 형식이나 구조를 관리한다. 모델에 맞지 않는 데이터는 흐름을 제어 받을 수 있다.
• View - 코드가 사용자에게 보여지는 부분을 담당한다. 사용자에게 보여지는 모습과 형태를 관리한다.
• Controller - 변화하는 데이터를 관리한다. View에서 발생하는 이벤트로 변경되는 데이터나 서버로부터 받은 변경된 데이터를 Model과 View에 업데이트한다.

MVC 패턴 은 양방향 데이터 흐름을 가지고 있다. 예를 들어 모델이 변경되면 뷰도 변경되고, 사용자에 의해 뷰에서 변경이 일어난다면 모델 또한 변경된다. 이러한 양방향 데이터 흐름은 설계하기도 간단하고, 코드를 작성하기도 쉽다는 장점이 있다.

하지만 애플리케이션의 규모가 커진다면, 한 개의 모델이 여러 개의 뷰를 조작하고, 한 개의 뷰가 여러 개의 모델을 조작할 수 있게 되면서 문제가 생길 수 있다.

🧿 Flux 패턴

2014년 페이스북에서 MVC 패턴의 대안으로 Flux 라는 새로운 아키텍처 패턴을 개발했다.

Flux 패턴 은 MVC 패턴에서 겪은 복잡한 상황을 개선하는 것을 목적으로 개발되었고, 그 방법으로 "단방향 데이터 흐름"을 적용하였다.

• View에서 이벤트 발생 시, 데이터를 직접 변경시키지 않고 Action을 넘겨주고
• Action은 반드시 Dispatcher를 지나게 되며
• Dispatcher를 통해 직접적인 데이터 변경이 일어나 Store에 변경사항이 적용되면
• View는 변경된 데이터를 Store를 통해 전달 받는다.

이러한 단방향 데이터 흐름은 기존 MVC 패턴에 있던 '상태의 전이' 현상(뷰와 모델 사이의 데이터 변경이 연결된 모든 곳을 따라 변경되는 현상)을 없애주고, '예측 가능하다'는 특징을 가진다. 또한 state가 필요한 컴포넌트와 데이터 저장소인 Store를 바로 연결해서 데이터가 단방향으로 흐르므로 성능이 효율적이다.

그리고 2015년에 Dan Abramov에 의해 React + Flux 구조에 Reducer를 결합한 Redux가 등장한다.

🎯 Redux의 3원칙

1️⃣ 진실은 하나의 소스로부터
애플리케이션의 모든 상태는 하나의 Store 안에 하나의 객체 트리 구조로 저장된다.

데이터의 변경은 Reducer를 통해 일어나며, 변경된 데이터는 Store에 저장된다. 모든 변경사항은 Store에 기록되기 때문에 데이터 흐름의 원천은 항상 Store여야 한다.

상황과 필요에 따라 Store를 여러 개 만들 수 있지만, 너무 많을 경우 기존 MVC 패턴을 사용하는 방식과 어떤 차이가 있는지 생각해볼 필요가 있다. Store는 보통 1개를 사용한다.

2️⃣ State는 읽기 전용이다
상태를 변화시키는 유일한 방법은 Action 객체를 전달하는 방법 뿐이다.

View에서 일어나는 이벤트는 직접 상태를 변경해서는 안되며, 이벤트는 단지 Action 객체를 Reducer로 전달하는 역할만 한다. 데이터의 변경은 Reducer만 할 수 있다. Reducer 이외의 공간에서 상태는 읽기 모드이다.

3️⃣ 변화는 순수 함수로 작성되어야 한다
Action 객체에 의해 상태 트리가 어떻게 변화하는지를 지정하기 위해 프로그래머는 순수 리듀서 함수를 작성해야 한다.

순수 Reducer 함수는 함수가 실행되는 곳에서 외부의 상태를 변경하지 않으면서 동일한 입력값에는 동일한 결과값을 반환해야 한다는 순수 함수의 기본 특징을 가지고 있으면서도, 다음 두 가지 특징을 추가로 갖는다.

• Reducer는 반드시 이전 상태와 Action을 매개변수로 받는다.
• Reducer는 결과값으로 이전의 데이터를 변경시키지 않고 새로운 데이터를 만들어 반환한다.
  
  

🛒 장바구니 예시

Action

Action은 보통 type과 payload 속성을 가지며, '무슨 일이 일어났는지'를 설명하는 객체이다.

{
  type: 'cart/addItem',
  payload: { id: 1, name: 'T-Shirt' }
}  

Redux Toolkit에서는 createSlice 함수가 action creator를 자동으로 만들어주기 때문에, 직접 Action 객체를 정의할 필요가 없다.

Reducer

먼저 Reducer는 Store와 Action 객체를 입력받아 새로운 상태 값을 출력하는 순수 함수다. Reducer는 반드시 순수 함수여야 하며, 외부 상태를 직접 수정하면 안된다. Action 객체는 반드시 type 속성 값을 가져야 한다.

2025년 기준 Redux Toolkit에서는 createSlice 로 Reducer를 정의한다. Redux Toolkit은 내부적으로 Immer를 사용해 불변성을 자동으로 관리하기 때문에, state.push() 처럼 직접 state를 변경하는 코드도 안전하게 작동한다.

// stor/cartSlice.js
import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice(
  name: 'cart',
  initialState: [],
  reducers: {
    addItem: (state, action) => {
      state.push(action.payload);
    },
    deleteItem: (state, action) => {
      return state.filter(item => item.id !== action.payload.id);
    },
  },
);

export const { addItem, deleteItem } = cartSlice.actions;
export default cartSlice.reducer;

Store

Store는 모든 state들을 담고 있는 중앙 저장소이다. 리액트 애플리케이션 전체에 상태를 공급하기 위해 Provider 로 감싼다.

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export default store;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

useDispatch()

useDispatch 함수는 컴포넌트에서 Store에 Action을 전달하기 위한 훅이다. Redux Store 전체 상태를 업데이트한다.

import { useDispatch } from 'react-redux';
import { addItem } from '../store/cartSlice';

function Product({ product }) {
  const dispatch = useDispatch();
  
  const handleAdd = () => {
    dispatch(addItem(product));
  };
  
  return <button onClick={handleAdd}>장바구니 담기</button>;
}

useSelector()

useSelector 는 Store의 상태 중 필요한 부분만 선택해서 가져오는 훅이다.

import { useSelector } from 'react-redux';

function CartList() {
  const items = useSelector((state) => state.cart);
  
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
  	  ))}
    </ul>
  );
}

🔁 전반적인 흐름

1. 컴포넌트에서 dispatch(action)를 호출한다.
2. Reducer가 현재 state와 action을 받아 새로운 state를 계산한다.
3. Store가 업데이트된 state를 구독 중인 모든 컴포넌트에 전달한다.
4. useSelector 를 사용한 컴포넌트는 변경된 값으로 자동 리렌더링된다.

즉, 데이터의 흐름은 "단방향"이며, 예측 가능하다.
Component -> Action -> Reducer -> Store -> Component

Redux의 특징 정리하기

• 전역 상태 관리 라이브러리이므로, 어느 컴포넌트에 상태를 두어야 할지 고민하지 않아도 된다.
• 단방향 데이터 흐름을 가진다.
• 상태를 읽기 전용으로 취급한다.
• Flux 아키텍처를 따른다. ➡️ redux-thunk나 redux-saga와 같은 미들웨어가 필수이다.
• 여러 라이브러리를 함께 사용하는 경우가 있기 때문에 러닝커브가 높은 편이다.
• 초기 세팅이 요구되며, 간단한 상태 하나를 관리하더라도 많은 코드량이 필요하다.
• React 전용 라이브러리가 아니다.

---

Recoil

Recoil은 React의 context API를 기반으로 구현된 함수형 컴포넌트에서만 사용 가능한, 페이스북에서 만든 라이브러리이다.

리액트의 호환성이나 단순함을 생각한다면 리액트에 내장된 hooks나 context API를 사용해 상태 관리를 하는 것이 가장 바람직하지만, 이 경우는 여러 가지 한계가 존재한다.

🔎 hooks나 context API를 사용했을 때의 문제점

1. 컴포넌트 상태를 상위 컴포넌트까지 끌어올릴 수 있지만, 이 과정에서 거대한 트리의 리렌더링이 발생할 수 있다.
2. Context는 단일 값만 저장 가능하고, 자체 Consumer를 가지는 여러 값들의 집합을 담는 것은 불가능하다.

Recoil은 내부적으로 방향 그래프 구조를 사용하며, React 컴포넌트 트리와 함께 작동한다. 이 그래프의 뿌리 역할을 하는 것이 atom, 그리고 그 상태를 기반으로 파생된 값을 계산하는 순수 함수가 selector 이다. 상태의 흐름은 atom -> selector -> component 와 같이 흐른다.

Atom

atom 은 Recoil에서 관리하는 최소 단위의 상태로, 여러 컴포넌트에서 동시에 구독하고 수정할 수 있다. atom 이 업데이트되면, 각각의 구독된 컴포넌트는 새로운 값을 반영해 리렌더링한다. 이를 통해 불필요한 리렌더링을 방지할 수 있다는 장점이 있다.

atom 은 atom() 함수를 사용해 생성한다. atom 의 키 값은 전역적으로 고유해야 한다.

const fontSizeState = atom({
  key: 'fontSizeState', // 고유한 키 값
  default: 14,
});

동일한 atom 이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유하며, 컴포넌트에서 atom 을 읽고 쓸 때는 useRecoilState(keyValue) 라는 훅을 사용해야 한다.

Selector

selector 는 하나 이상의 atom이나 selector를 입력으로 받아 새로운 값을 계산하는 순수 함수이다. 쉽게 말해, atom 에 저장된 원본 상태로부터 파생된 상태를 만드는 역할을 한다. selector 는 입력으로 받은 atom이나 selector가 업데이트될 경우 자동으로 재실행된다.

selector 를 정의할 때 get 속성은 계산 로직을 담은 함수이다. 이 함수의 인자로 전달되는 get() 을 사용하면 다른 atom이나 selector의 값을 읽을 수 있다. 이렇게 접근하면 자동으로 의존 관계가 등록돼, 참조 중인 상태가 바뀔 때마다 selector 가 재실행된다.

const userNameSelector = selector({
  key: 'userNameSelector',
  get: ({ get }) => {
    const user = get(userState);
    return `${user.firstName} ${user.lastName}`;
  },
});

기본적으로 selector는 읽기 전용이며, useRecoilValue(selectorName) 훅으로 값을 조회할 수 있다. 하지만 set 속성을 함께 정의하면 쓰기 가능한 selector 도 만들 수 있다. useRecoilState(selectorName) 훅으로 get/set 모두 가능해진다.

Recoil의 특징 정리하기

• Recoil은 전역 상태 관리를 컴포넌트 내부에서의 상태 관리처럼 간단한 get/set 인터페이스로 사용할 수 있도록, boilerplate-free API 를 제공한다.

// example
const [user, setUser] = useRecoilState(userState);

• 동시성 모드를 비롯한 다양한 React 기능들과 호환이 가능하다.
  Recoil이 React 팀에서 만든 라이브러리이기 때문에, 동시성 모드, Suspense, React.lazy 등의 최신 기능과 자연스럽게 통합된다.

동시성 모드(Concurrent Mode)
흐름이 여러 개가 존재하는 경우이며, 리액트에서 렌더링의 동작 우선 순위를 정해 적절한 때에 렌더링해준다.

• 상태 정의에 대한 코드 분할(Code Splitting)이 가능하다.
  Recoil의 상태(atom, selector)는 필요할 때마다 정의하고 사용할 수 있기 때문에, 각 기능별로 독립적인 상태 모듈을 관리할 수 있어 유지보수에 용이하다.
• 전역 상태를 교체 시 컴포넌트 수정이 불필요하다.
  Recoil의 atom 을 다른 atom 으로 교체하더라도, 이를 사용하는 컴포넌트는 동일한 인터페이스로 상태를 받기 때문에 컴포넌트의 로직을 변경할 필요가 없다.
• 전역 상태의 지속성
  Recoil의 상태는 React 컴포넌트 트리와 독립적으로 관리되기 때문에, 컴포넌트가 리렌더링되거나 언마운트되어도 전역 상태는 그대로 유지된다.
• atom과 selector만 알고도 구현이 가능할 정도의 낮은 러닝 커브
  
  

🚨 주의할 점

Recoil은 빌드 후 ES5 문법으로 변환되지 않기 때문에, Recoil을 ES5와 같이 사용하는 것은 지원하지 않는다. 반드시 ES6와 함께 사용해야 한다.

Reference

Redux Essentials, Part 1: Redux Overview and Concepts
리덕스(Redux)는 왜 쓰는 건데⁉
Recoil 공식 문서 - 소개 - 동기