개요

React를 사용해 웹 애플리케이션을 개발하면, 사용자 이벤트를 통해 해당 컴포넌트나 다른 컴포넌트에 변화를 줄 수 있다.

이것만으로도 프로젝트를 진행 할 수 있지만, Redux를 사용하면 컴포넌트와 상태를 분리하여 표현에 집중한, 보다 단순한 함수 컴포넌트로 만들 수 있게 된다.

이 부분에서 Redux가 React에 종속된 하위 라이브러리라고 오해할 수 있지만, Redux는 React없이도 사용할 수 있는 상태 관리 라이브러리이다.

React만을 사용한 애플리케이션에서는 몇가지 비효율적인 부분이 있는데,

• 해당 상태를 직접 사용하지 않는 컴포넌트도 상태 데이터를 가짐
• 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함
• 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐
• 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음

이 문제점을 해결하기 위해서 사용하는 Redux는 전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 이 문제들을 해결해준다.

Redux는 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성되고, 이 Action 객체는 Dispatch 함수의 인자로 전달되며 Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다. 상태가 변경되면, React는 화면을 다시 렌더링 한다.

즉, Redux는 데이터가 Action → Dispatch → Reducer → Store 으로 단방향으로 흐른다.

Redux에는 세가지 원칙이 있다.

• Single source of truth
  동일한 데이터는 항상 같은 곳에서 가져와야한다.
• State is read-only
  상태는 읽기 전용이라는 뜻으로, Action 객체가 있어야만, Redux의 상태를 변경할 수 있다.
• Changes are made with pure functions
  변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록, Reducer는 순수함수로 작성되어야 한다.