Redux의 핵심 개념: Action, Reducer, Store, Middleware

Redux를 처음 배우신다면 Action, Reducer, Store, Middleware 라는 개념이 어렵게 느껴질 수 있습니다. 하지만 이 개념만 제대로 이해하면 Redux를 쉽게 사용할 수 있습니다. 이번 글에서는 Redux의 동작 원리와 핵심 개념을 차근차근 설명해드리겠습니다! 🚀

안녕하세요, 여러분! React 애플리케이션이 커질수록 상태 관리가 복잡해지는 문제를 경험하셨을 겁니다. 이 문제를 해결하기 위해 Redux는 전역 상태를 중앙에서 관리하는 강력한 솔루션을 제공합니다. 그렇다면, Redux는 어떻게 동작할까요? 핵심 개념인 Action, Reducer, Store, Middleware 를 쉽게 설명해드리겠습니다! 😊

1️⃣ Redux의 동작 흐름

Redux는 단방향 데이터 흐름(Unidirectional Data Flow)을 따릅니다. 즉, 상태(state)는 한 방향으로만 흐르며, 다음과 같은 과정으로 변경됩니다.

(1) UI 이벤트 발생 
→ (2) Action 생성 
→ (3) Reducer 처리 
→ (4) Store 업데이트 
→ (5) UI 업데이트

✅ 사용자가 버튼 클릭 등의 이벤트 발생
✅ 해당 이벤트를 처리하는 Action(액션) 생성
✅ 액션이 Reducer(리듀서)로 전달됨 → 새로운 상태 반환
✅ Store(스토어)가 상태를 저장하고 관리
✅ 상태가 변경되면 UI가 업데이트됨

2️⃣ Redux의 핵심 개념

🔹 1. Action (액션)

"무슨 일이 일어날지를 설명하는 객체"

Redux에서 상태를 변경하는 유일한 방법은 Action(액션)을 발생시키는 것 입니다.

액션 객체는 type 을 필수로 포함하며, 필요에 따라 payload 를 추가할 수 있습니다.

✅ Action 예제


const incrementAction = { type: "INCREMENT" };
const decrementAction = { type: "DECREMENT" };
const setUserAction = { type: "SET_USER", payload: { name: "홍길동", age: 30 } };

✅ Action Creator (액션을 생성하는 함수)


const increment = () => ({ type: "INCREMENT" });
const setUser = (user) => ({ type: "SET_USER", payload: user });

👉 dispatch(increment())를 실행하면 INCREMENT 액션이 Reducer로 전달됩니다.

🔹 2. Reducer (리듀서)

"이전 상태(state)와 액션(action)을 받아서 새로운 상태를 반환하는 순수 함수"

Redux에서는 기존 상태를 직접 변경하는 것이 아니라, 새로운 상태 객체를 반환해야 합니다.

이를 위해 불변성(immutability)을 유지하는 것이 중요합니다.

✅ Reducer 예제


const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

👉 새로운 상태 객체를 반환해야 하며, return state; 처럼 그대로 반환하면 상태가 변경되지 않습니다.

❓ 자주 묻는 질문 (FAQ)

Q Redux를 사용해야 하는 이유는 무엇인가요?

Redux는 전역 상태를 중앙에서 효율적으로 관리하고, 애플리케이션의 상태 변경을 예측 가능하게 만들어주는 라이브러리입니다. 특히 여러 컴포넌트에서 공유해야 하는 상태가 많을 때 Redux를 사용하면 좋습니다.

Q Redux를 사용하면 성능이 저하되지 않나요?

Redux는 최적화 없이 사용하면 불필요한 리렌더링이 발생할 수 있습니다. 하지만 useSelector 에서 shallowEqual 을 사용하거나, reselect 같은 라이브러리를 활용하면 성능을 최적화할 수 있습니다.

Q Redux와 Context API의 차이점은 무엇인가요?

Context API는 React에서 기본적으로 제공하는 전역 상태 관리 도구로, 간단한 상태 공유에 적합 하지만 성능 최적화가 필요할 수 있습니다. 반면 Redux는 더 체계적인 상태 관리가 가능하며, 미들웨어를 활용한 비동기 작업 처리가 가능합니다.

🚀 결론: Redux를 언제 사용할까?

Redux는 전역 상태를 체계적으로 관리할 때 유용한 라이브러리입니다. 하지만 모든 프로젝트에 Redux가 필요한 것은 아닙니다. 아래 기준을 참고하여 Redux를 사용할지 결정해보세요.

상황	Redux 사용 여부
작은 프로젝트	❌ Context API 또는 Zustand 추천
여러 컴포넌트에서 상태 공유 필요	✅ Redux 추천
비동기 API 요청이 많음	✅ Redux + Thunk/Saga 추천

Redux를 도입하기 전에, "이 프로젝트에서 상태 관리를 얼마나 복잡하게 할 필요가 있을까?" 를 고민해보세요. 여러분은 Redux를 사용하시나요? 의견을 댓글로 공유해주세요! 🚀

Stack Note