JavaScript로 만들어진 애플리케이션들의 상태를 관리하기 위한 라이브러리

상태 관리가 필요한 이유

자식 컴포넌트들은 서로 데이터를 전달할 수 없어서, 부모 컴포넌트를 통해서만 데이터를 전달받을 수 있다.

자식 컴포넌트들이 많다면 상태 관리가 매우 복잡해지기 때문에 상태 관리 라이브러리를 이용하여 이러한 문제를 해결할 수 있다.

MVC

Model - View- Controller

Flux가 등장한 배경이 되는 양방향 데이터 흐름을 가진 디자인 패턴

Action -> Controller -> Model <-> View

  • Model : 데이터 관리 및 처리
  • View : Model의 상태를 화면에 렌더링. 인터페이스 역할을 하기 때문에 사용자로부터 Action을 받기도 한다.
  • Controller : 사용자에게 Action을 받아서 Model과 View에게 데이터를 업데이트하도록 지시한다.

단점 - 한 개의 Model이 여러 개의 View와 연결되거나 한 개의 View가 여러 개의 Model과 연결될 수 있어 버그가 발생하면 원인을 찾기가 어렵다.

Flux

Facebook에서 만든 단방향 데이터 흐름을 가진 디자인 패턴

데이터의 흐름이 단방향이므로 애플리케이션의 구조와 상태가 단순화되어 MVC의 단점을 극복할 수 있다.

View에서 발생하는 모든 Action은 반드시 Dispatcher를 거친 후에 Store에 저장된다.

  • Action : state를 변경하는 정보를 담은 객체. 사용자 이벤트 또는 API를 수신한다.
  • Dispatcher : Store에게 Action에 따라 state를 변경하도록 명령한다.
  • Store : 애플리케이션의 state를 저장하는 객체
  • View : UI

Flux의 흐름

  1. Action 발생
  2. Action이 Dispatcher에게 전달
  3. Dispatcher가 Store에 Action 전달
  4. Store가 state 갱신
  5. 갱신된 state가 View에 전달
  6. 새로운 state가 View에 렌더링

Redux

Reducer + Flux

Redux 구성요소

  • Action : state를 변경하는 정보를 담은 객체. 사용자 이벤트 또는 API를 수신한다.
  • Dispatcher : Reducer 함수에게 Action을 전달한다.
  • Reducer : Dispatcher를 통해 받은 Action으로 state를 변경할 수 있는 유일한 메서드
  • Store : 애플리케이션의 state를 저장하는 객체. Reducer가 존재하는 곳
  • View : UI

Flux vs Redux

Redux 3원칙

  1. Single source of truth
    • 애플리케이션 내 Store는 반드시 1이다.
  2. State is read-only
    • state를 직접 변경해서는 안 된다.
    • state는 Action을 발생시켜 Reducer를 통해서만 변경이 가능하다.
  3. Changes are made with pure functions
    • Reducer 함수는 파라미터로 기존 state와 Action을 받는데, 이때, 결과는 새로운 state 객체를 리턴 해야한다.
    • 즉, 기존 state를 변경하는 것이 아니라 새로운 객체를 만드는 것이다.

Connect 함수

각 컴포넌트들과 Store를 연결해주는 함수

connect(mapStateToProps, mapDispatchToProps)(컴포넌트 명);

mapStateToProps(state, ownProps?)

  • connect의 첫 번째 인자
  • Store에서 state를 가져와서 컴포넌트의 props로 state를 보낸다.
  • state : Store에서 가져온 state
  • ownProps : 현재 컴포넌트가 가지고 있는 모든 props
  • return된 값은 props에 추가된다. 매개 변수의 state를 리턴시키면 컴포넌트에서는 state를 props로 받아서 사용할 수 있다.

mapDispatchToProps(dispatch, ownProps?)

  • connect의 두 번째 인자
  • dispatch를 props로 보낸다.
  • dispatch : reducer 함수에게 Action을 전달하는 역할
  • ownProps : 현재 컴포넌트가 가지고 있는 모든 props

참고 자료

https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow
https://redux.js.org/understanding/thinking-in-redux/three-principles#three-principles
https://react-redux.js.org/using-react-redux/connect-mapstate https://velog.io/@iamhayoung/
https://velog.io/@iamhayoung/Redux-JavaScript-Redux-%EC%9E%85%EB%AC%B8-Store-Reducer-Action-Dispatch-Subscription#1%EF%B8%8F%E2%83%A3-redux-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0
https://velog.io/@iamhayoung/React-Redux-React-Redux-입문-Provider-Connect-mapStateToProps-mapDispatchToProps