Redux란?

kim98111·2022년 2월 8일
0

Redux

목록 보기
1/5
post-thumbnail

Redux란 무엇인가

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

Redux는 애플리케이션 화면에 보여지는 것을 변경하고 UI에 영향을 주는 데이터인 상태(state)를 관리하는데 도움을 주는 라이브러리입니다. 즉, 여러 컴포넌트 또는 전체 앱에서 이러한 데이터(상태)를 관리하는 라이브러리입니다.

상태의 종류

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

1. Local State

Local State는 "하나의 컴포넌트"에 종속되는 상태입니다. 예를 들어, 인풋 필드의 입력값을 useState를 사용하여 모든 키 입력과 함께 해당 입력값을 state 변수에 저장합니다. 또는 세부 필드를 껏다 켯다하는 버튼이 있어서 버튼을 클릭하면 세부 내용을 볼 수 있고 다시 클릭하면 세부 내용을 숨겨줍니다.

2. Cross-Component State

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

3. App-Wide State

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

React Context

Cross-Component와 App-Wide State의 경우 props를 전달하는 것이 번거로울 수 있습니다. 이는 이전에 배운 React Context를 활용하여 props chain을 생성하지 않고 다른 컴포넌트에서 데이터를 사용할 수 있도록 도와주었습니다.

props chain을 생성하지 않고 다른 컴포넌트에게 데이터를 전달헤주는 React Context는 Cross-Component 또는 App-Wide State를 더 쉽게 관리할 수 있게 해주는 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 코드로 표현됩니다.

2. 성능

또 다른 잠재적인 단점은 성능입니다. Context는 데이터의 업데이트를 자주 하지 않아도 되는 것에는 좋지만 데이터 변경이 자주 일어나는 경우에는 적합하지 않습니다.

React 팀에서 올린 공식 인용문입니다. 해당 글은 Context API 경우 인증 정보와 같은 자주 변경되지 않는 데이터에 대해서 사용하는 것은 괜찮지만 데이터의 변경이 자주있는 경우에는 적합하지 않다고 나와있습니다.

그리고 상태 전달과 같은 유동적인 것을 대체할 준비가 되어있지 않다고 말하고 있습니다.

즉, React Context는 모든 면에서 Redux를 대체할 수 없습니다.

profile
Frontend Dev

0개의 댓글