1. Redux

React Query에 대해 알아보기 전에 간략하게 전역 상태 관리에 사용되는 대표적인 라이브러리, Redux에 대해 간단히 알아보고 가겠습니다.

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 입니다. 어디에도 React에 대한 언급은 없습니다. Redux는 React에 종속되는 라이브러리가 아닙니다. 어떠한 자바스크립트 앱에서라도 사용될 수 있으며 Redux를 React에서 사용할 수 있도록 wrapping 해주는 기능은 react-redux 에서 제공합니다.

1-1) Redux란?

Redux는 자바스크립트 앱이 점차 고도화 되고, 그에 따라 복잡해지는 데이터를 통제하기 위해 고안된 Flux 패턴 기반의 구현체입니다.

http://facebook.github.io/flux/docs/in-depth-overview/

Redux는 상태 변화를 관리하기 위해 상태 변화를 일으키는 시점과 형태에 제약을 두었습니다. 데이터의 변경은 반드시 발행된 Action에 의해 순수 함수인 Reducer 내에서 일어나야 하며, 단방향으로만((View → Action + Dispatcher → Middleware → Reducer → Store) → View) 일어납니다.

<aside> 💡 *** 순수 함수란?**

• 동일한 인자가 들어오면 항상 같은 값을 리턴하는 함수
• 외부의 상태에 영향(Side Effect, 부수 효과)을 주지 않는 함수

</aside>

1-2) Thinking In Redux

Redux의 설계는 아래와 같이 정리해볼 수 있습니다.

• View에서 유저가 일으키는 행동에 맞게 Action 객체가 생성되고,
• Action은 Dispatcher를 통해 Reducer로 전달되고,
• Action의 type에 따라 Reducer 내에 미리 정해져 있던 로직이 Store를 변경하고,
• 변경된 Store의 내용이 View로 반영되는 패턴

이러한 구조를 구현하기 위해 Redux는 다음 세 가지 설계 철학을 가집니다.

• 진실은 하나의 소스로부터 (Single source of truth)
  • 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 자바스크립트 객체 트리로 저장됩니다.
• 상태는 읽기 전용이다 (State is read-only)