📦Redux란 무엇인가?

Source: Dev.to

프론트엔드 개발, 특히 React를 배우고 있다면 Redux에 대해 들어봤을 가능성이 높습니다. 처음엔 헷갈릴 수 있지만, 핵심 아이디어는 간단합니다.

Redux란?

Redux는 애플리케이션 전체에서 사용되는 데이터를 저장하고 관리하는 단일, 중앙 장소를 제공하는 상태 관리 라이브러리입니다. 이를 모든 컴포넌트가 읽고 쓸 수 있는 큰 저장 상자라고 생각하면, 반복적인 prop‑drilling을 없앨 수 있습니다.

핵심 개념

Store

스토어는 전체 애플리케이션 상태를 보관합니다.

// Example state
{
  count: 0
}

스토어를 창고, 은행 사물함, 혹은 모든 데이터가 살아있는 메모리 박스로 상상해 보세요.

Action

액션은 무엇이 일어나야 하는지를 설명하는 순수 JavaScript 객체입니다.

// Example action
{
  type: "INCREMENT"
}

액션은 레스토랑에서 주문을 넣거나, 버튼을 클릭하거나, 메시지를 보내는 행위와 같습니다.

Reducer

리듀서는 액션에 대한 응답으로 상태가 어떻게 변할지를 결정하는 순수 함수입니다.

function counterReducer(state = { count: 0 }, action) {
  if (action.type === "INCREMENT") {
    return { count: state.count + 1 };
  }
  return state;
}

리듀서는 주문(액션)을 받고 결과를 만들어 내는 요리사라고 생각하면 됩니다.

데이터 흐름 예시

버튼을 눌러 카운터를 증가시킬 때:

1. 사용자가 버튼 클릭 🖱️
2. 액션이 디스패치됨 📢 ({ type: "INCREMENT" })
3. 리듀서가 액션을 받아 🔁 새로운 상태를 반환
4. 스토어가 데이터를 업데이트 🏬
5. UI가 자동으로 다시 렌더링 🎉

이 일방향 흐름 (action → reducer → store → UI) 을 단방향 데이터 흐름이라고 합니다.

Redux 사용의 장점

• ✅ 큰 애플리케이션 상태를 중앙에서 관리
• ✅ 많은 컴포넌트에 걸친 prop drilling 방지
• ✅ 상태 변화를 예측 가능하고 추적 가능하게 유지
• ✅ Redux DevTools 같은 도구로 디버깅 간소화
• ✅ 깔끔하고 조직적인 프로젝트 구조 유지

Redux를 사용해야 할 때

Redux가 빛을 발하는 경우:

• 많은 컴포넌트가 동일한 데이터를 공유하는 규모가 큰 앱
• 상태 로직이 복잡하거나 상호작용이 많은 경우
• 상태 변화를 신뢰성 있게 추적·디버깅해야 할 때

아주 작은 앱에서는 Redux가 불필요한 오버헤드가 될 수 있습니다.

Redux Toolkit

Redux Toolkit은 Redux 로직을 작성하는 현대적이고 권장되는 방법입니다. Toolkit은 Redux를 다음과 같이 만들어 줍니다:

• 설정이 더 쉬움 😊
• 코드가 더 깔끔하고 간결함 ✨
• 보일러플레이트 코드 감소 🧹

Toolkit을 사용하면 슬라이스, 리듀서, 비동기 thunk 등을 훨씬 적은 코드 라인으로 만들 수 있습니다.

요약

• 🧠 Store = 중앙 데이터 컨테이너
• 📢 Action = 무엇이 일어나야 하는지에 대한 설명
• 🔁 Reducer = 새로운 상태를 만들어 내는 로직
• 🏬 Redux = 모든 것을 연결해 주는 전체 관리 시스템

카운터나 todo 앱 같은 작은 예제로 시작해 흐름을 연습하면, 금방 Redux에 익숙해질 수 있습니다. 프로젝트를 계속 만들면서 경험을 쌓다 보면 Redux가 React 툴킷의 자연스러운 일부가 될 것입니다. 🚀