전역 상태 관리

전역 상태 관리

React Context

단점

• 설정이 아주 복잡해질 수 있음.

• React Context를 이용한 상태관리가 복잡해질 수 있음.

• 대형 애플리케이션 구축시, 아래와 같은 코드가 나올 수 있음.

  return(
      <AuthContextProvider>
          <ThemeContextProvider>
              <UIInteractionContextProvider>
                  <MultiStepFormContextProvider>
                      <UserRegistration />
                  </MultiStepFormContextProvider>
              </UIInteractionContextProvider>
          </ThemeContextProvider>
      </AuthContextProvider>
  )

Context를 나눔에 따라, 아주 심하게 중첩된 JSX 코드가 나올 수 있음.

깔끔하게 관리하기 위해, 큰 컨텍스트 하나가 많은 것을 관리해야 될 수 있을 수 있는

문제점이 있음.

• 부적절한 상태를 관리한다면 성능이 나쁠 수 있음.

• 상태 변경이 자주 일어날 때에는 리액트 컨텍스트가 적합하지 않음

---

selector가 없는 React의 context API를 사용할 경우 최상단 state를 업데이트하면 하위의 모든 컴포넌트가 리렌더링된다는 꽤나 치명적인 성능 이슈가 발생합니다.

인프런 기술 블로그

---

Redux

• 중앙 데이터 저장소( Central Data(State) Store) : 단 한개만 가짐

• 전체 애플리케이션의 모든 상태를 저장

• 저장소 전체를 항상 직접 관리할 필요가 없음.

• 컴포넌트는 저장소에 있는 데이터를 직접 조작하지 않음.

  • "리듀서" 개념을 활용

  • 리듀서 함수를 활용하여 저장소의 상태를 변경함.

리듀서는 변화를 일으키는 함수입니다. 리듀서는 두가지의 파라미터를 받아옵니다. 리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환합니다. 이 리듀서는 useReducer 를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있습니다.

/* Reducer : reducer함수 정의 */
const reducer = ( state = { 기본값 }, action) => {
    if(action.type === 'increment' {
        return {
            counter : state.counter + 1
        }
    )

    return state;
}

/* Store : 스토어를 선언 */
const store = redux.createStore(reducer)


/* Subscribe : 스토어 정보를 조회 */
const counterSubScriber = () => {
    const latestState = store.getState()
}

store.subscribe(counterSubScriber)

/* Dispatch : 스토어 정보 갱신 */
store.dispatch({
    type : 'increment'
})

udemy 강의와 다르게, redux-toolkit을 사용하고 있음.

장점

• • 상태의 중앙화: Redux는 중앙화된 store를 제공하기 때문에 state를 관리하기 쉬우며 디버깅에 용이합니다.

• • 예측 가능한 상태: Redux는 순수 함수(리듀서)를 사용하기 때문에 state의 변화와 버그를 추적하기 쉽습니다.

• • 쉬운 테스트: Redux의 state가 순수 함수인 리듀서에 의해 update 되기 때문에 어플리케이션의 state와 행동을 테스트하기 쉽게 해 줍니다.

• • 높은 상호 운용성: Redux는 널리 쓰이고 있으며, 많은 라이브러리들과 통합 가능하기 때문에 이것을 활용한 부가적 기능의 원활한 구현이 가능합니다.

• • 규모가 큰 커뮤니티: 오래된 역사를 자랑하는 Redux는 그에 맞게 큰 규모의 커뮤니티를 보유하고 있기 때문에 개발자들에게 풍부한 리소스를 제공할 수 있습니다.

단점

• • 많은 양의 보일러 플레이트: 많은 개발자들이 많은 양의 보일러 플레이트를 Redux의 큰 단점으로 꼽았습니다. 특히 store, action, reducer들을 정의할 때가 그렇습니다.

• 복잡함: 작고 간단한 어플리케이션을 구현할 때, Redux를 사용하는 것은 오히려 프로젝트를 복잡하게 만들 수 있습니다.

• 높은 러닝커브: Redux는 state 관리와 함수형 프로그래밍 개념에 익숙지 않은 주니어 개발자들이 배우기 쉽지 않습니다.

• 퍼포먼스: Redux는 중앙화된 store를 통해 state의 업데이트가 이루어지고 state가 변화할 때마다 리렌더링 되기 때문에 퍼포먼스 측면에서 좋지 않을 수 있습니다.

---

Recoil

FaceBook에서 만든 상태관리 라이브러리

Flux Pattern