Redux의 개념과 사용하는 이유

리덕스의 개념과 사용하는 이유

리덕스란?

리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다.

리덕스는 다수의 컴포넌트나 심지어는 앱 전체에서 state를 관리하도록 도와준다.

우리는 상태를 세 가지로 구분할 수 있는데 로컬 상태, 크로스 컴포넌트 상태,앱 와이드 상태이다.

로컬 상태 (Local State)

로컬 상태는 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태이다.

예를 들면 사용자 입력을 받고 useState를 사용해서 그 입력을 state 변수에 저장하고 토글 버튼을 클릭하면 세부 정보가 표시되고 다시 클릭하면 감춰지게 되는 경우이다.

보통은 useState를 사용해서 컴포넌트 안에서 로컬 상태를 관리하고 약간 복잡하다면 useReducer를 사용할 수도 있다.

크로스 컴포넌트 상태(Cross-Component State)

하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태도 흔히 볼 수 있다.

예를 들면 모달 오버레이를 열거나 닫는 버튼이 있다면 모달 컴포넌트는 다수의 컴포넌트에 영향을 미칠 수 있다.

모달을 여는 함수는 모달의 바깥에 있고 모달 안쪽에 있는 버튼을 클릭하여 모달을 닫을 수 있는데 그런 경우에는 다수의 컴포넌트를 사용해서 모달을 표시하고 감추게 된다.

useState나 useReducer를 사용할 때 prop drilling을 통해서 다수의 컴포넌트에 걸쳐 prop로 함수를 전달할 수 있다.

그러면 다양한 컴포넌트들 사이에서 상태를 함께 관리할 수 있다.

앱 와이드 상태(App-Wide State)

종종 우리는 단지 다수의 컴포넌트가 아니라 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태도 있다.

예를 들면 사용자 인증인데 로그인하면 탐색바를 변경해야 할 수도 있고 다른 많은 컴포넌트에도 영향을 미칠 것이다.

useState나 useReducer를 사용할 때 props를 통해서 전체 컴포넌트에 상태를 전달할 수도 있고 리액트 내장 기능인 Context를 사용할 수도 있다.

리덕스를 사용하는 이유

Context와 Redux 모두 크로스 컴포넌트 상태나 앱 와이드 상태를 관리하도록 도와주는데 그렇다면 왜 리덕스가 필요한지에 대한 의문이 들 수 있다.

리액트 Context는 잠재적인 단점이 몇 개 있는데 그 중에 하나는 리액트 Context를 사용하면 설정이 아주 복잡해질 수 있고 리액트 Context를 이용한 상태 관리가 상당히 복잡해질 수 있다는 점이다.

소형 또는 중형 애플리케이션은 대부분 문제가 되지 않을 가능성이 높지만 엔터프라이즈 수준의 애플리케이션을 구축한다면 리액트 Context를 사용하면 문제가 될 수 있다.

다수의 컴포넌트나 전체 앱에 영향을 미치는 많은 다양한 상태가 있을 것이고 그런 상태들을 관리하기 위해 구축한 ContextProvider 컴포넌트가 아주 많아 심하게 중첩된 JSX 코드가 나오게 된다.

다양하고 많은 ContextProvider를 구축하지않고 애플리케이션의 전체 상태와 모든 다양한 상태들을 관리하기 위해 큰 Context 하나와 ContextProdiver 하나만 사용한다고 해도 큰 Context 하나가 다양한 많은 것들을 관리하기 때문에 그것 자체를 유지하고 관리하기가 어려워질 수 있다.

두 번째 단점은 성능이다.

Context는 테마를 변경하거나 인증 같은 저빈도 업데이트에는 아주 좋지만, 데이터가 자주 변경되는 경우에는 좋지 않다.

따라서 리액트 Context가 모든 시나리오와 모든 경우에서 리덕스를 대체할 수 없다.

리액트 Context를 사용해서 부적절한 상태를 관리한다면 성능이 나쁠 수 있다.

정리해보자면 아주 심하게 중첩된 JSX 코드와 다양하고 많은 ContextProvider, 또는 유지하기 어려운 거대한 하나의 ContextProdiver를 가지게 되면서 복잡한 설정과 관리라는 단점이 있고 다른 한편으로 우리는 잠재적인 성능 이슈가 있다.

왜냐하면 고빈도 상태 변경에는 리액트 Context를 사용하지 말아야 하기 때문이다.

물론 둘 중에 하나를 선택해야하는 문제가 아니다. 애플리케이션에서 Context와 리덕스를 둘 다 사용할 수도 있다.

일반적으로 앱 와이드 상태에는 둘 중에 하나만 사용하겠지만 전반적인 앱 와이드 상태에 리덕스를 사용하고, 중요한 일부 다중 컴포넌트 상태에는 여전히 Context를 사용할 수 있다.