Redux란

Redux는 JavaScript 애플리케이션을 위한 예측 가능한 상태 컨테이너입니다. 주로 React와 함께 사용되지만, Vue, Angular와 같은 다른 프레임워크나 라이브러리와도 사용할 수 있습니다. Redux는 애플리케이션의 상태 관리를 단순화하고, 상태 업데이트를 일관되고 예측 가능한 방식으로 처리합니다.

Redux 개념

상태 (State)

애플리케이션의 상태는 하나의 큰 JavaScript 객체로, 앱에서 사용되는 모든 데이터를 포함합니다.

액션 (Action)

상태를 변화시키는 이벤트입니다. 액션은 type 속성을 가진 객체로, 어떤 상태 변화를 일으킬지 설명합니다. 필요에 따라 추가 데이터를 payload로 전달할 수 있습니다.

리듀서 (Reducer)

액션에 의해 상태가 어떻게 변경되어야 하는지 정의하는 순수 함수입니다. 리듀서는 이전 상태와 액션을 인자로 받아 새 상태를 반환합니다.

스토어 (Store)

애플리케이션의 상태와 리듀서를 포함하는 객체입니다. 스토어는 앱의 상태를 저장하며, getState(), dispatch(action), subscribe(listener) 같은 메서드를 통해 상태를 관리합니다.

데이터 흐름

Redux의 데이터 흐름은 엄격하게 단방향입니다:

1. 액션 발송: UI에서 사용자의 상호작용 또는 다른 이벤트에 응답하여 액션을 발송(dispatch)합니다.
2. 리듀서 실행: 스토어는 현재 상태와 발송된 액션을 리듀서에 전달합니다. 리듀서는 액션 타입에 따라 새 상태를 계산합니다.
3. 상태 업데이트: 리듀서가 반환한 새 상태는 스토어에 저장됩니다. 이 과정을 통해 앱의 상태가 업데이트됩니다.
4. UI 업데이트: 상태가 변경되면, 스토어를 구독하는 UI 컴포넌트가 새 상태에 맞게 갱신됩니다.

Redux 사용 이유

예측 가능한 상태 관리

Redux는 모든 상태 변화를 중앙에서 관리하여, 애플리케이션의 동작을 더 예측 가능하게 만듭니다.

디버깅 용이

Redux DevTools와 같은 도구를 사용하여 상태 변화를 시간에 따라 추적하고, 액션에 따른 상태 변화를 확인할 수 있습니다.

컴포넌트 간 상태 공유

전역 상태를 사용하여, 여러 컴포넌트 간에 상태를 쉽게 공유하고 업데이트할 수 있습니다.

유지 보수성

액션과 리듀서를 통한 명확한 구조는 대규모 애플리케이션의 유지 보수성을 향상시킵니다.

결론

Redux는 그 자체로는 작은 라이브러리지만, 애플리케이션의 상태 관리를 위한 강력한 아키텍처를 제공합니다. 크고 복잡한 애플리케이션, 특히 여러 상태를 공유하고 다루어야 하는 경우 Redux를 사용하는 것이 좋습니다.

---

이 문서는 Redux의 핵심 개념과 데이터 흐름, 그리고 Redux를 사용하는 이유를 정리한 것입니다. Redux는 상태 관리를 단순화하고, 예측 가능하게 만들어주는 도구로, 특히 복잡한 애플리케이션에서 유용합니다.