[React] 전역 상태관리 개념 정리

전역 상태 관리

• 데이터 흐름 관리 제어

  부모↔자식
  자식↔자식
  이어져있지 않은 다른 컴포너트 간도 OK

Flux 패턴

• 페이스북이 제안한 디자인 패턴

• 기존 MVC 모델의 한계를 극복

  • 데이터의 변경 사항을 신속하게 전파하기 어려움 → 모델이 늘어날수록 전파할 대상도 늘어나기 때문

• 대규모 어플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램 예측가능성을 높임

  MVC패턴

---

데이터 흐름 방식

• 단방향 데이터 흐름
  • Action / Action Creator 데이터의 상태를 변경할 수 있는 명령어 새로 발생한 액션 타입과 데이터 페이로드를 액션 메시지로 묶어 디스패쳐로 전달
    
  • Dispatcher 액션 메시지를 감지하면 콜백함수로 각 스토어에 전달
    
  • Store(Model) 어플리케이션의 상태, 상태를 변경할 수 있는 메서드를 갖고 있음 어떤 타입의 액션이 도착했느냐에 따라서 메서드를 다르게 적용해 상태를 변경함
    
  • View React에 해당. 컨트롤러 뷰는 스토어에서 변경된 데이터를 가져와 모든 자식 뷰에게 데이터를 분배. 데이터를 넘겨받은 뷰는 화면을 새로 렌더링
    

Redux

• 자바스크립트 상태관리 라이브러리
• 단일 스토어로 모든 상태 트리를 관리

기본 개념

• Store
  • 상태 관리가 되는 오직 하나의 공간
    
• Action
  • 앱에서 스토어에 운반할 데이터(주문서)
    
  • 자바스크립트 객체 형식

{
  type: 'ACTION_CHANGE_USER', // 필수
  payload: { // 옵션
    name: '하나몬',
    age: 100
  }
}

• Reducer
  • 액션을 리듀서에 전달 ← dispatch() 메소드 사용!
  • 호출된 리듀서를 통해 스토어의 상태 업데이트
• mapStateToProps()
• Redux hooks (비교적 최근 기술)
  • useSelector
  • useDispatch

---

Redux 사용의 장단점

• 순수함수 사용으로 상태의 예측 가능성
  • 유지보수 유리
• 단점
  • 상당한 보일러 플레이트
• 언제 사용해야 할지
  • 상당한 양의 데이터가 계속해서 변화할 때
  • 미들웨어의 존재

Redux Toolkit을 사용하자 (slice)
특정 기능에 대한 슬라이스를 생성하면

import { createSlice } from '@reduxjs/toolkit';
const msgboxSlice = createSlice({
  name: 'msgbox',
  initialState: {
    open: false,
    message: '',
  },
  reducers: {
    open(state, action) {
      state.open = true;
      state.message = action.payload
    },
    close(state) {
      state.open = false;
    }
  }
});
export default msgboxSlice;
// reducer: msgboxSlice.reducer
// action creators: msgboxSlice.actions.open, msgboxSlice.actions.close
// actionType: 
// - msgboxSlice.actions.open.type: 'msgbox/open'
// - msgboxSlice.actions.close.type: 'msgbox/close'

아래와 같이 액션타입, 액션크리에이터, 리듀서를 만들어줘야하는 보일러플레이트 코드를 줄일 수 있다.

export const OPEN = 'msgbox/OPEN';
export const CLOSE = 'msgbox/CLOSE';
export const open = (message) => ({ type: OPEN, message });
const initialState = {
  open: false,
  message: '',
};
export default msgbox(state = initialState, action) {
  switch (action.type) {
    case OPEN:
      return { ...state, open: true, message: action.message };
    case CLOSE:
      return { ...state, open: false };
    default:
      return state;
  }
}

리디기술블로그 발췌