Code States 43일차 - React 상태관리

Redux

Redux는 애플리케이션에서 정교한 상태 관리를 구현하는 데 도움이 되는 라이브러리 중 하나이다. 구성 요소의 로컬(React의 로컬 상태)를 넘어선다. 상태를 길들이기 위해 더 큰 응용 프로그램에서 취하는 솔루션 중 하나이다. React 애플리케이션은 Redux에 완벽하게 적합하지만 다른 라이브러리와 프레임워크도 Redux의 개념을 많이 채택했다.

 

React가 없는 Redux의 기초

Redux는 Flux 아키텍처에서 몇 가지 제약 조건을 채택했지만 전부는 아니다. 실제 상태 업데이트에 대한 정보를 캡슐화하는 작업이 있다. 상태를 저장하는 저장소도 있지만 Store는 싱글톤이다. 따라서 Flux 아키텍처에 사용된 것과 같은 여러 Store가 없다. 또한 단일 Dispatcher가 없다. 대신 Redux는 Reducer를 사용한다. 기본적으로 Reducer는 Action에서 정보를 선택하고 Store에 저장된 이전 상태와 함께 새로운 상태로 정보를 축소한다. Store의 상태가 변경되변 View는 Store를 구독하여 이에대해 조치를 취할 수 있다.

View -> Action -> Reducer(s) -> Store -> View

Redux는 Reducer와 Flux가 결합한 단어이다. 상태는 더 이상 View에 존재하지 않으며 View에만 연결된다. 단방향 데이터 흐름의 일부이기 때문에 두 끝에서 연결된다. 한 쪽 끝은 결국 상태를 업데이트하는 작업을 트리거하고 두 번째 끝은 저장소에서 상태를 받는 역할을 한다. 따라서 View는 상태 변경에 따라 업데이트할 수 있지만 상태 변경을 트리거할 수도 있다. 이 경우 View는 React이지만 Redux는 다른 라이브러리나 독립 실행형으로도 사용할 수 있다. 결국 상태 관리 컨테이너일 뿐이다.

---

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체이다.

{
  type: 'ADD_TO_CART',
  payload: request,
}

보통 위와 같은 모양으로 구성된다. type은 필수이고, 그 외의 것들은 선택적이다.

이렇게 모든 변화를 action을 통해 취하는 것은 만드려는 앱에서 무슨 일이 일어나고 있는지 직관적으로 알기 쉽다.

Dispatch

Dispatch는 Action을 전달하는 메소드이다. dispatch의 전달인자로 Action 객체를 전달한다. 그리고 Reducer를 호출해 state의 값을 바꾸는 열할을 한다.

Store

state가 관리되는 오직 하나뿐인 저장소의 역할을 한다. Redux 앱의 state가 저장되어 있는 공간이다.

createStore 메소드를 활용해 reducer를 연결하는 방법이다. createStore와 더불어 다른 리듀서의 조합을 인자로 넣어서 스토어를 생성할 수 있다. (실제 소스 코드에서는 미들웨어와 Redux devtools 지원을 위해 두번째 인자에 추가적인 내용이 들어가있다.)

const store = createStore(rootReducer);

Reducer

현재의 state와 Action을 이용해 새로운 state를 만들어 내는 pure function이다.

const itemReducer = (state = initilState, action) =>{
  switch (action.type){
    case ADD_TO_CART:
      return Object.assign({}, state,{
        cartItems: [...state.cartItems, action.payload];
      });
      
    default:
      return state;
  }
}

보통 위와 같은 모양으로 구성된다. switch문 대신 if문으로 작성할 수 있다.

Reducer의 Immutability(불변성)

Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다.

useSelector()

useSelector()는 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있다.

useSelector의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state 값이 들어간다.

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해주는 메소드이다.