Frontend Study

React _ Redux 왜 써야할까?

jimmmy_jin 2025. 1. 5. 12:06

Redux가 필요한 이유에 대해 알아보자.

React로 프로젝트를 개발하다 보면, 점점 복잡해지는 상태(state) 관리에 직면하게 된다. 단순한 컴포넌트 수준의 상태 관리로는 충분했던 초기 단계와 달리, 여러 컴포넌트 간의 상태 공유가 필요해질 때 상태 관리의 복잡성은 급격히 증가한다. 이때 Redux는 강력한 도구로 등장한다. 이번 글에서는 Redux가 왜 필요한지, 그리고 어떤 상황에서 유용하게 사용할 수 있는지 알아보자.

  1. 상태 관리의 복잡성 문제
    React에서 컴포넌트 간 데이터를 공유하려면 일반적으로 props를 사용한다. 하지만 다음과 같은 문제가 발생할 수 있다.
  • 상태가 여러 컴포넌트를 거쳐 전달된다.
    데이터를 자식 컴포넌트로 전달하기 위해 중간 컴포넌트들이 props를 단순히 전달하는 경우가 생긴다. 이를 "prop drilling"이라고 한다.
  • 컴포넌트 간 상태 공유가 어려워진다.
    두 개 이상의 컴포넌트가 동일한 데이터를 공유해야 하는 경우, 공통 부모에 상태를 올려야 하는데, 이 과정은 종종 비효율적이고 복잡해질 수 있다.

이처럼 상태가 여러 곳에서 관리되고 의존성이 복잡해질수록 코드 유지보수가 어려워진다.

  1. Redux란 무엇인가?
    Redux는 애플리케이션의 상태를 중앙 집중식(store)으로 관리할 수 있게 도와주는 JavaScript 라이브러리다. React와 함께 많이 사용되지만, React에만 국한되지 않는다.

Redux의 핵심 개념은 다음과 같다:

  • Store: 애플리케이션의 상태가 저장되는 중앙 저장소.
  • Action: 상태를 변경하기 위한 신호(객체).
  • Reducer: 액션에 따라 상태를 업데이트하는 순수 함수.
  • Dispatch: 액션을 스토어에 전달하는 메서드.

Redux를 사용하면 컴포넌트 간 상태를 효율적으로 공유하고 관리할 수 있다.

  1. Redux가 필요한 이유
  1. 전역 상태 관리가 쉬워진다.
    Redux를 사용하면 애플리케이션의 모든 상태를 하나의 store에서 관리한다. 이를 통해 상태가 여러 곳에서 관리되는 문제를 해결할 수 있다.
  • 상태가 중앙에서 관리되므로 컴포넌트 간 상태 동기화가 용이하다.
  • 컴포넌트가 직접 상태를 변경하지 않으므로, 데이터 흐름이 예측 가능해진다.
  1. 상태 변경 로직이 명확하다.
    Redux는 상태 변경을 위해 항상 action과 reducer를 사용한다. 이러한 구조는 상태 변경 로직을 명확히 정의하고, 예측 가능하게 만든다.
  • "어디에서, 어떤 이유로 상태가 변경되었는가?"를 쉽게 추적할 수 있다.
  1. Prop Drilling 문제를 해결한다.
    React에서 데이터를 자식 컴포넌트로 전달하기 위해 중첩된 props를 사용해야 하는 문제를 해결한다. Redux의 connect 또는 useSelector를 통해 필요한 데이터에 직접 접근할 수 있다.
  2. 확장성과 유지보수성
    Redux는 상태 관리 로직을 컴포넌트와 분리하므로, 애플리케이션이 커지더라도 상태 관리 코드가 잘 구조화된다. 또한, 상태가 어떻게 관리되고 있는지 명확히 알 수 있어, 새로운 개발자가 프로젝트에 합류하더라도 쉽게 이해할 수 있다.
  1. Redux를 사용하는 상황
    Redux는 모든 프로젝트에 필요한 것은 아니다. 다음과 같은 경우에 Redux 사용을 고려하자:
  • 컴포넌트 간 상태 공유가 많을 때
    여러 컴포넌트가 동일한 데이터를 사용하거나 업데이트해야 하는 경우.
  • 복잡한 상태 관리가 필요한 경우
    상태가 중첩된 구조로 이루어져 있거나, 상태 변경 로직이 많을 때.
  • 예측 가능한 상태 관리가 필요한 경우
    상태 변경이 복잡하고, 로직을 추적하기 어려운 프로젝트.
  1. Redux의 단점
    Redux는 강력한 도구이지만, 몇 가지 단점도 있다.
  • 초기 설정의 복잡성
    Redux를 처음 도입하려면 store, action, reducer 등을 설정해야 하며, 이는 초보자에게 어렵게 느껴질 수 있다.
  • 불필요한 오버헤드
    상태 관리가 단순한 프로젝트에서는 Redux 사용이 오히려 불필요한 복잡성을 초래할 수 있다.
  1. 결론
    Redux는 React 애플리케이션에서 상태 관리의 복잡성을 해결하기 위한 강력한 도구다. 상태를 중앙에서 관리하고, 데이터 흐름을 예측 가능하게 만들어주는 Redux는 특히 대규모 프로젝트나 복잡한 상태 관리가 필요한 프로젝트에서 유용하다.

그러나 모든 프로젝트에 Redux를 사용하는 것은 바람직하지 않다. 상태 관리가 단순한 경우에는 Context API나 React의 로컬 상태 관리 기능만으로 충분할 수 있다.

결론적으로, Redux는 프로젝트의 요구사항에 따라 신중히 도입해야 한다. 하지만 복잡한 상태 관리를 효율적으로 해결하고 싶다면, Redux는 확실히 고려할 만한 가치가 있다.