[Redux] React 상태 관리를 위한 예측 가능한 컨테이너

728x90

Redux 

React를 사용하다 보면 컴포넌트 간의 상태 공유가 점점 복잡해집니다. 부모 → 자식으로 상태를 전달하거나, 여러 컴포넌트에서 같은 데이터를 관리하다 보면 데이터 흐름이 꼬이고 유지보수가 어려워지죠. 이럴 때 필요한 것이 바로 Redux입니다.
Redux는 앱의 모든 상태를 하나의 중앙 저장소(Store)에서 관리하게 해주며, 상태의 흐름을 예측 가능하게 만들어줍니다.

 

---

1.  Redux란?

Redux는 JavaScript 앱의 상태(state)를 관리하기 위한 라이브러리입니다. 주로 React와 함께 사용되지만, 프레임워크에 의존적이지는 않습니다.

핵심 목표

• 상태(state)의 일관성과 예측 가능성 보장
• 중앙 집중식 상태 관리
• 디버깅, 테스트, 개발 도구 통합 용이

 

---

2.  왜 Redux가 필요한가?

React는 기본적으로 컴포넌트 단위의 지역 상태 관리(useState)를 사용합니다. 하지만 아래와 같은 상황이 생기면 복잡해집니다.

• 여러 컴포넌트가 동일한 상태를 공유해야 할 때
• 깊은 컴포넌트 트리에서 props로 상태를 계속 전달해야 할 때
• 전역적인 사용자 정보, 테마, 알림 등의 상태가 필요할 때

이럴 때 Redux를 사용하면 모든 상태를 하나의 Store에서 관리하고, 필요한 컴포넌트만 해당 상태를 구독하게 만들 수 있습니다.

 

---

3.  Redux의 핵심 구성 요소

Redux는 3가지 핵심 개념으로 이루어져 있습니다.

구성 요소	역할
Store	전체 상태(state)를 저장하는 객체
Action	상태에 어떤 변화가 일어났는지 설명하는 객체
Reducer	현재 상태와 Action을 받아 새로운 상태를 반환하는 순수 함수

상태 변화의 흐름

View → Action → Reducer → Store → View

 

---

4.  간단한 Redux 코드 예제

a.  액션 정의

const increment = () => ({ type: 'INCREMENT' });

b.  리듀서 작성

function counter(state = { value: 0 }, action) {
    switch (action.type) {
    	case 'INCREMENT': 
            return { 
                value: state.value + 1 
            };
    	default: return state;
    }
}

c.  스토어 생성 및 사용

import { createStore } from 'redux';

const store = createStore(counter);
store.subscribe(() => console.log(store.getState()));
store.dispatch(increment()); // { value: 1 }

 

---

5.  Redux의 주요 특징

a.  단방향 데이터 흐름

• 상태가 흐르는 방향이 명확해서, 어떤 액션이 어떤 결과를 만들었는지 추적이 쉬움

b.  상태 변경이 명확

• dispatch(action)으로만 상태를 바꿀 수 있어서 상태 변화의 흐름이 예측 가능함

c.  디버깅이 쉬움

• Redux DevTools를 통해 상태 변화, 액션 로그, 시간 이동 디버깅까지 가능

 

---

6.  Redux의 단점과 한계

단점	설명
보일러플레이트 많음	액션, 액션 타입, 리듀서를 전부 따로 정의해야 함
러닝 커브 있음	구조와 철학을 이해하는 데 시간이 필요
소규모 앱엔 과함	간단한 앱에는 Context API나 useState로 충분한 경우도 많음

 

---

7.  Redux는 언제 써야 할까?

Redux를 쓰는 게 좋은 상황

• 여러 컴포넌트에서 동일한 상태를 필요로 할 때
• 상태의 흐름을 명확히 추적하고 싶을 때
• 규모가 있는 앱에서 상태 구조가 복잡할 때
• 비동기 API 상태 처리, 캐싱, 전역 설정 등을 다루는 경우

대안 : Context API

• 앱이 작고, 단순한 전역 상태만 공유할 때는 React Context + useReducer 조합으로도 충분함

 

---

8.  마무리

Redux는 복잡한 상태 관리 문제를 해결하기 위한 도구입니다. 하지만 초기 설정이 다소 번거로워서 최근에는 Redux Toolkit을 함께 사용하는 것이 표준입니다.

함께 보면 좋은 자료

블로그 글 :

[Redux Toolkit] 상태 관리를 효율적으로 설계하는 법

 

---