[React] Redux란? 왜 써야 할까?

 

React로 프로젝트를 하다 보면 어느 순간 state 관리가 점점 복잡해지는 경험을 하게 됩니다.

처음에는 간단한 컴포넌트 간 props 전달로도 충분했지만, 컴포넌트가 많아지고 상태가 얽히면서 버그가 생기고,

"대체 어디서 상태가 바뀌는지" 알 수 없어지는 순간이 오죠.

이럴 때 등장하는 것이 Redux 입니다.

 

 

Redux란?

Redux는 자바스크립트 앱의 상태(state)를 중앙에서 관리할 수 있도록 도와주는 라이브러리입니다.

React뿐만 아니라 다양한 프레임워크에서도 사용할 수 있지만,

보통은 React + Redux 조합으로 많이 사용합니다.

 

 

❓ Redux를 왜 사용할까?

1. props 전송이 귀찮을 때

React는 컴포넌트 기반이기 때문에

상위 컴포넌트 → 하위 컴포넌트로 데이터를 전달할 때 props를 사용합니다.

하지만 깊은 구조로 컴포넌트가 중첩될수록 props를 계속 전달해야 하죠.

 

예시 구조 : 

index.html
 ├─ 배경 컴포넌트
 │   └─ 메뉴 컴포넌트
 │       └─ 글자 컴포넌트

 

이때 상태(state)를 가장 바깥쪽 컴포넌트에 만들고 내부까지 전달하려면 중간 컴포넌트들도 전부 props를 받아야 합니다.

이걸 prop drilling이라고 부르며, 매우 귀찮고 관리도 어려워집니다..

Redux는 이런 문제를 해결해줍니다. 전역 상태를 store에서 관리하고,

필요한 컴포넌트는 직접 연결해서 바로 상태를 조회하거나 수정 요청을 보낼 수 있습니다.

 

 

 

2. 상태 관리가 쉬워짐

React에서 여러 컴포넌트가 각각 state를 가지고 있고, 서로 상태를 바꾸기 시작하면 버그가 생기기 쉽습니다.

버그가 발생했을 때 어떤 컴포넌트에서 상태가 잘못 바뀐 건지 추적하기가 어렵죠.

하지만 Redux는 state 변경을 한 곳(store.js)에서만 하도록 강제합니다.

 

✅ store.js란??

Redux를 사용할 때 가장 먼저 만드는 파일 중 하나가 바로 store.js입니다.

이 파일은 Redux의 전역 상태 저장소(store)를 생성하는 곳이에요.

Redux의 중심은 store인데, 이 안에 앱 전체에서 사용하는 상태(state)가 담겨 있습니다.

 

  → 📁실제로는 이런 구조로 사용돼요

src/
├── store.js           # 전역 상태 저장소 생성
├── App.js
└── components/
    └── MyComponent.js

 

 

상태를 직접 수정하는 것이 아니라, 컴포넌트에서는 dispatch라는 방식으로 요청만 보내고,

실제 변경은 reducer라는 함수가 처리합니다.

// 예시 reducer 구조
function reducer(state = 초기값, action) {
  if(action.type === 'CHANGE_MENU') {
    return {...state, menu: action.payload };
  }
  return state;
}

이처럼 "상태 수정 방식"을 미리 정의해두고, 외부에서는 직접 수정하지 못하게 막습니다.

즉, 상태 변경은 모두 예측 가능한 방식으로 이루어지기 때문에 디버깅이 쉬워집니다.

 

 

---

 

📌  정리 !!

문제	Redux 도입 후
props 전달 반복	store에서 바로 가져오니 생략 가능
컴포넌트마다 상태	상태를 중앙(store.js)에서 통합 관리
어디서 상태가 바뀌었는지 추적 어려움	dispatch → reducer → 상태변경 흐름이 명확
상태 변경 방식 제각각	if(action.type === '') 같은 방식으로 통일

 

핵심 개념 요약

• store : 전역 상태를 저장하는 공간
• dispatch : 상태 변경 요청을 보내는 함수
• reducer : 실제 상태를 어떻게 바꿀지 정하는 함수
• action : 어떤 요청인지 담은 객체 ({ type : '', payload:'' })