전역 상태 관리

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

Previous유틸리티 타입 Next컴포넌트 설계하기

Last updated 7 months ago