[React] 리덕스(Redux)란?

리덕스(Redux)란?

리덕스(Redux)는 상태 관리 라이브러리로, 주로 React 애플리케이션에서 전역 상태를 효율적으로 관리하기 위해 사용된다. 컴포넌트 간의 상태를 중앙에서 관리하고, 상태 변경 로직을 예측 가능하게 만들어준다.

 

리덕스를 사용하는 이유

1. 전역 상태 관리
   • 리액트에서 상태를 관리할 때 props로 전달하면 컴포넌트 간 관계가 복잡해질 수 있음 (Props Drilling 문제)
   • 리덕스를 사용하면 **중앙 저장소(Store)**에서 모든 상태를 관리하여, 필요할 때 어디서든 접근 가능
2. 일관된 상태 관리
   • 상태 변경이 한 곳(리듀서)에서만 이루어지므로, 예측 가능하고 디버깅이 쉬움
3. 시간 여행 디버깅 지원
   • 액션(Action)과 상태(State)의 변화를 추적할 수 있어 버그를 찾기 쉬움 (Redux DevTools 지원)

 

리덕스의 핵심 개념

1. 스토어(Store)

• 애플리케이션의 전역 상태를 저장하는 중앙 저장소
• 하나의 애플리케이션에는 하나의 스토어만 존재

 

2. 액션(Action)

const addTodo = { type: 'ADD_TODO', payload: 'Redux 공부하기' };

• 상태를 변경하는 유일한 방법
• 객체 형태이며, type 속성(필수)과 추가 데이터(payload)를 가질 수 있음

 

3. 리듀서(Reducer)

const initialState = { count: 0 };

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

• 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수
• 상태를 직접 변경하지 않고, 새로운 상태 객체를 반환함

 

4. 디스패치(Dispatch)

store.dispatch({ type: 'INCREMENT' });

• 액션을 스토어에 전달하는 함수
• 스토어는 액션을 리듀서에 보내 상태를 업데이트함

 

5. 구독(Subscribe)

store.subscribe(() => {
  console.log(store.getState());
});

• 상태가 변경될 때 특정 함수를 실행하도록 설정

 

🔥 리덕스의 기본 흐름

1. UI에서 액션을 디스패치 (dispatch(action))
2. 리덕스 스토어가 액션을 리듀서로 전달
3. 리듀서가 현재 상태와 액션을 기반으로 새로운 상태 생성
4. UI가 새로운 상태를 반영하여 업데이트됨

 

🚀 리덕스 간단한 예제 (Vanilla JavaScript)

const { createStore } = require('redux');

// 1. 초기 상태 정의
const initialState = { count: 0 };

// 2. 리듀서 함수 생성
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 3. 스토어 생성
const store = createStore(counterReducer);

// 4. 상태 변경 감지 (구독)
store.subscribe(() => console.log(store.getState()));

// 5. 액션 디스패치
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // { count: 2 }
store.dispatch({ type: 'DECREMENT' }); // { count: 1 }

 

 

✅ React에서 Redux 사용하기

설치 :

리액트에서 리덕스를 사용할 때는 react-redux 라이브러리를 함께 사용해야 합니다.

npm install redux react-redux

 

Redux Toolkit 사용 권장 :

기존 리덕스는 설정이 복잡하기 때문에, 보일러플레이트 코드를 줄인 Redux Toolkit을 사용하는 것이 일반적입니다.

npm install @reduxjs/toolkit react-redux

 

 

🎯 Redux를 배울 때 함께 보면 좋은 개념

• React Context API (리덕스 없이 전역 상태 관리 가능)
• Redux Toolkit (리덕스를 더 간단하게 사용)
• useReducer (리액트에서 리덕스 없이 리듀서 패턴 사용)

리덕스를 배우면 상태 관리가 더 체계적으로 이루어지므로, 한 번 익혀두면 다양한 프로젝트에서 활용 가능