React Context vs Redux

김동현·2022년 2월 8일

React React Context vs Redux redux

Redux

목록 보기

1/5

Redux란 무엇인가

Redux는 "app-wide state" 혹은 "cross-component state"를 위한 상태 관리 시스템입니다.

Redux는 애플리케이션 화면에 보여지는 것을 변경하고 UI에 영향을 주는 데이터인 상태(state)를 관리하는데 도움을 주는 라이브러리입니다.

즉, 여러 컴포넌트 또는 앱 전체에서 사용되는 데이터(상태)를 관리하는 라이브러리입니다.

상태의 종류

상태를 세 가지 관점으로 분류할 수 있습니다.

1. Local State

Local State는 "하나의 컴포넌트"에 종속되는 상태입니다.

컴포넌트 내 useState 또는 useReducer 훅을 사용하여 컴포넌트에 종속되는 상태는 다른 컴포넌트가 해당 상태값을 사용하지 않고 단지 종속된 컴포넌트 내에서만 영향을 주는 상태입니다.

2. Cross-Component State

하나의 컴포넌트가 아니라 "여러 컴포넌트"에 영향을 미치는 상태도 있습니다. 이러한 상태를 Cross-Component state라고 합니다.

useState 나 useReducer 훅으로 등록한 상태가 여러 컴포넌트에게 영향을 미치는 상태값의 경우 props를 통해 전달할 수 있었습니다.

3. App-Wide State

여러 컴포넌트 뿐만 아니라 "애플리케이션 전체"에 영향을 미치는 상태도 있습니다. 이러한 상태를 App-Wide State라고 합니다. 예를 들어, 사용자 인증 정보 같은 것들을 이에 해당합니다.

애플리케이션 전체에 영향을 미치는 상태값인 경우 props를 통해 전달할 수 있지만 규모가 커질수록 props chain이 깊어지는 문제가 발생하며 이는 React Context API를 통해 해결할 수 있었습니다.

React Context

Cross-Componen state와 App-Wide State의 경우 props를 통해 전달하는 것이 번거로울 수 있습니다. 이는 이전에 배운 React Context API를 활용하여 props chain을 생성하지 않고 컴포넌트가 직접 Context에 접근할 수 있었습니다.

props chain을 생성하지 않고 다른 컴포넌트에게 데이터를 전달헤주는 React Context는 Cross-Component 또는 App-Wide State를 더 쉽게 관리할 수 있게 해주는 React에 내장된 자체 기능입니다.

여기서 오해할 만한 점이 있습니다. React Context API는 useState나 useReducer 훅으로 생성한 상태를 Context에 저장하여 다른 컴포넌트에게 전달해줍니다. 즉, Context API를 사용하더라도 여전이 상태는 React가 관리합니다.

Redux

반면 "Redux는 자체적으로 상태를 생성하고 관리하며 컴포넌트에게 상태를 전달"해줍니다. 즉, 상태를 React가 아닌 Redux가 관리합니다.

Redux 또한 props chain 같은 문제를 해결하기 위해 사용될 수 있습니다. 즉, React Context와 Redux는 Cross-Component State와 App-Wide State를 관리하는 데 도움을 줍니다.

React Context가 있는데 Redux가 필요한 이유가 무엇인지 알아보겠습니다.

Context API Vs Redux

React Context는 몇 가지 잠재적인 단점을 갖고 있습니다. 잠재적이라고 말한 이유는 우리가 구축하는 앱에서는 문제가 되지 않을 수 있기 때문입니다. 따라서 만약 문제가 없다면 Redux를 사용할 필요가 없습니다.

참고로 하나의 애플리케이션에서 Context API와 Redux를 모두 사용할 수도 있습니다.

React Context를 사용할 때의 한 가지 잠재적인 단점은 다음과 같습니다.

1. 설정의 복잡성

React Context로 상태를 관리하는 것이 매우 복잡해질 수 있습니다. 이것은 우리가 만드는 애플리케이션의 종류에 따라 달라질 것입니다.

규모가 큰 애플리케이션에서 많은 다른 종류의 Context가 여러 컴포넌트 또는 전체 애플리케이션에 영향을 미치는 상태를 갖는 수많은 다른 종류의 Context Provider 컴포넌트들을 갖게될 수 있습니다.

return (
    <AuthContextProvider>
        <ThemeContextProvider>
            <UIInteractionContextProvider>
                <MultipleStepFormContextProvider>
                    ,,,
                </MultipleStepFormContextProvider>
            </UIInteractionContextProvider>
        </ThemeContextProvider>
    </AuthContextProvider>
);

위 코드처럼 깊게 중첩된 Context의 Provider 컴포넌트가 나타나게 됩니다.

물론 여러 개의 Context Provider을 만들지 않고, 전체 상태와 다양한 종류의 모든 상태를 하나의 큰 Context와 하나의 Context Provider 컴포넌트만을 사용할 수도 있습니다. 하지만 하나의 큰 Context Provider 컴포넌트가 다양한 많은 작업을 관리해야 하므로 많은 작업을 관리하고 유지하기에 상당히 어려워질 수 있습니다.

즉, 하나의 큰 Context를 통해 관리한다면 해당 Context Provider 컴포넌트가 많은 작업을 하게되고, Context를 작게 나눈다면 깊게 중첩된 JSX 코드로 표현됩니다.