Redux (리덕스)

 

🟡 Redux

애플리케이션의 전역 상태(Global State)를 한 곳에서 관리하는 상태 관리 라이브러리.

공유해야 하는 데이터를 하나의 Store에서 관리하여 여러 컴포넌트가 동일한 상태를 일관성 있게 사용할 수 있도록 도와준다.

 

◼️ 필요 이유

React에서는 useState로 컴포넌트 내부의 상태를 관리하고, 부모에서 자식으로 props를 통해 데이터를 전달한다.

하지만 프로젝트 규모가 커질수록 여러 컴포넌트에서 같은 데이터를 공유하거나 변경해야 하는 경우가 많아진다. 이때 컴포넌트 구조가 깊어지면 중간 컴포넌트가 사용하지 않는 데이터까지 계속 전달해야 하는 Props Drilling 문제가 발생하고, 서로 관계없는 컴포넌트끼리 데이터를 공유하는 것도 어려워진다.

Redux는 이러한 상태를 하나의 Store에서 전역으로 관리하기 때문에, 필요한 컴포넌트가 직접 상태를 조회하고 변경할 수 있어 데이터를 일관성 있게 관리하고 Props Drilling 문제를 줄일 수 있다.

👉 Redux는 React뿐만 아니라 다른 JavaScript 라이브러리 및 프레임워크에서도 사용할 수 있으며, React에서는 주로 react-redux와 함께 사용한다.

 

◼️ 핵심 개념

1️⃣ 하나의 Store에서 상태 관리

애플리케이션의 전역 상태는 하나의 Store에서 관리한다.

Store
 ├─ user
 ├─ cart
 ├─ products
 └─ theme

 

2️⃣ State는 직접 변경하지 않는다.

State는 직접 수정하지 않고 Action을 통해 변경을 요청한다.

dispatch({
  type: "counter/up"
});

 

3️⃣ Reducer가 새로운 State를 만든다.

Reducer는 현재 State와 Action을 받아 새로운 State를 반환하는 순수 함수(Pure Function)이다.

(state, action) => newState

• 동일한 입력이면 항상 동일한 결과를 반환해야 한다.

 

◼️ 데이터 흐름

Redux는 단방향 데이터 흐름으로 동작한다.

 사용자 이벤트 발생
        ↓
   Action 생성
        ↓
  dispatch() 호출
        ↓
   Reducer 실행
        ↓
 새로운 State 생성
        ↓
  Store 업데이트
        ↓
 컴포넌트 리렌더링

• 이 구조 덕분에 상태 변화 과정을 추적하기 쉽고 디버깅도 수월하다.

 

◼️ 주요 컴포넌트

🔹 store

애플리케이션의 모든 전역 상태를 저장하는 공간이다.

const store = configureStore({
  reducer: counterReducer
});

 

🔹 state

현재 애플리케이션이 가지고 있는 데이터이다.

• 로그인 정보
• 장바구니
• 게시글 목록
• 다크모드 여부

 

🔹 action

어떤 상태를 변경할지 설명하는 객체이다.

{
  type: "counter/up"
}

• 필요한 데이터를 함께 전달할 수도 있다.

{
  type: "counter/up",
  payload: 5
}

• type : 어떤 작업인지 구분
• payload : 함께 전달할 데이터

 

🔹 dispatch

Action을 Store로 전달하는 함수이다.

dispatch({
  type: "counter/up"
});

• Dispatch가 호출되면 Reducer가 실행된다.

 

🔹 reducer

Action에 따라 새로운 State를 반환하는 함수이다.

function reducer(state, action) {
  switch (action.type) {
    case "counter/up":
      return {
        value: state.value + 1
      };

    default:
      return state;
  }
}

• Reducer에서는 기존 State를 직접 수정하지 않고 새로운 State를 반환해야 한다.

 

◼️ React와 함께 사용하는 주요 API

🔹 Provider

Redux Store를 React 애플리케이션에 연결한다.

<Provider store={store}>
  <App />
</Provider>

• 모든 하위 컴포넌트에서 Store를 사용할 수 있다.

 

🔹 useSelector()

Store에서 필요한 State를 가져온다.

const count = useSelector(state => state.counter.value);

• 읽기 전용으로 State를 조회할 때 사용한다.

 

🔹 useDispatch()

Action을 Store로 전달한다.

const dispatch = useDispatch();

dispatch(counterSlice.actions.up());

• 상태를 변경할 때 사용한다.

 

◼️ 활용 사례

• 여러 컴포넌트가 같은 데이터를 공유할 때
• 전역 상태가 많을 때
• 상태 변경 로직이 복잡할 때
• 프로젝트 규모가 큰 경우
• 협업 시 일관된 상태 관리가 필요할 때

 

 

📍 POINT 📍

✔️ 현재 Redux에서는 Redux Toolkit(RTK) 사용을 권장한다. ✔️

 

---

 

🔗 react-redux 설치 🔗

https://react-redux.js.org/

terminal

# If you use npm:
npm install redux
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

• 리덕스 / 리액트리덕스 둘 다 설치.