[Day 50] Redux (1)

Redux

상태 관리 라이브러리

Context API 의 역사

React는 2013년에 등장했지만, Context API는 2018년에 등장. —> 그러면 그 동안은 상태를 어떻게 한번에 내려줬을까? —> 이전에 비공개였던 Context API를 이용해서 만든 Redux Library를 이용했다. (2018년 이전에는 사실상 Redux가 Context API의 역할을 했다.)

Redux란?

Redux는 Context 기능과 고급 상태 관리 기법이 섞여 있는 라이브러리라고 볼 수 있다. —> 사실 고급 상태 관리 기법이 필요 없다면 Redux를 사용하지 않아도 된다. (Context API로 대체 가능)

Redux를 통한 고급 상태 관리 기법

Redux는 상태 변화를 값으로 나타낸다. —> 조합성이 좋아진다.

상태 변화를 값으로 바꾸면 좋은 점

1. 상태 변화의 로깅이 편해진다. (일일이 console.log() 안해도 된다.)
2. Undo & Redo가 쉬워진다. (스택에 상태 변화를 값의 형태로 쌓아놓을 수 있기 때문)
3. 시간 여행이 가능해진다. (스택에 상태를 쌓아놓기 때문에 가능하다)

용어

1. Store : React 상태를 저장하는 저장소 (여러 기능을 갖추고 있음)
   • 스토어에 상태 변화의 값(action)을 넣으면 상태(state)가 변한다.
   • 스토어를 만들 때 리듀서를 같이 만든다.
   • 애플리케이션의 모든 상태는 하나의 스토어에 저장된다. (스토어가 진실의 원천이 된다.)
2. Action : 상태 변화를 나타내는 값(객체)
3. Dispatch : Action을 Store에 넣는 행위
4. Subscribe : Store를 Subscribe 해서 Dispatch가 발생할 때마다(state가 바뀔 때마다) 실행할 함수를 등록하는 절차. (Store에 Subscribe라는 이벤트 리스너를 달아주는 형식으로 사용한다.) —> Subscribe에서 setState()를 호출해주면 리액트 세계의 화면이 다시 그려진다.
5. Reducer : Store 안에 존재하면서 이전 상태와 액션을 받아서 다음 상태를 반환하는 함수. (스토어의 상태 변화를 실제로 처리해주는 함수) —> 반환된 다음 상태를 스토어의 state로 바꿔준다.
   • Reducer의 이름은 상태와 똑같이 짓는 것이 관례!

예제

Redux-Exercise