[React] 리덕스 (Redux) vs Context API

 

---

리덕스(Redux)는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 입니다. 

컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있습니다.

Context API vs Redux 

Context API ? 

- 전역적(global)인 데이터를 공유할 수 있도록 고안된 방법입니다.

- 로그인 정보 또는 웹 사이트 내에 사용자 설정 파일, 테마, 언어 등을 컴포넌트 간 공유 데이터에 사용됩니다.

- redux, react-router, styled-components와 같은 라이브러리들도 Context API기반으로 구현되었습니다.

- 세가지 주요 개념 createContext, Provider, Consumer가 있습니다.

- Context를 사용하면 컴포넌트 재사용이 어려워짐으로 꼭 필요할 때에만 사용해야 합니다.

 

props가 있지 않은가??

컴포넌트는 props를 통해 데이터를 전달 할 수 있지만, 여러 컴포넌트들에게 전달할 props가 있다면 과정이 매우 복잡해지며 애플리케이션 유지보수성이 낮아질 수 있습니다.

그렇기 때문에 redux와 mobx같은 라이브러리를 사용하여 데이터 상태 관리를 할 수 있습니다.

이 방법외에도 Context API를 이용하여 글로벌한 상태 관리를 할 수 있습니다.

 

세가지 주요 개념

createContext < React.createContext(defaultValue) >

- context 객체를 만들때 사용하는 함수입니다.

- createContext함수를 호출하면 Provider와 Consumer 컴포넌트를 반환합니다.

- defaultValue는 초기값을 말합니다. (Provider를 사용하지 않았을 때 적용될 값)

 

Provider < Context.Provider >

- context의 value를 변경하는 역할을 합니다.

- Provider를 사용할 때에는 value를 꼭 명시해주어야만 동작함으로 주의합니다.

- 전달받은 컴포넌트의 수는 제한이 없습니다.

 

Consumer < Context.Consumer >

- context 변화를 구독하는 컴포넌트를 말합니다.

- 설정한 값을 불러와야 할 때 사용합니다.

 

리덕스를 사용하는 것 과 Context API를 사용하는 것의 차이

1. 미들웨어 

리덕스에는 미들웨어(Middleware)라는 개념이 존재합니다. 리덕스로 상태 관리를 할 때 리듀서 함수를 사용합니다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있습니다.

미들웨어는 주로 비동기 작업을 처리 할 때 많이 사용됩니다.

 

2. 유용한 함수와 Hooks

Context API를 사용할 때에는 Context도 새로 만들고, Context와 Provider 설정도 하고 각 Context를 편하게 사용하기 위해 커스텀 Hook를 만들어 사용해야 하는데, 리덕스에서는 여러 기능이 존재합니다.

connect 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있으며, useSelector, useDispatch, useStore과 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수 있습니다.

 

connect 함수와 useSelector 함수에는 내부적으로 최적화가 잘 이루어져있어서 실제 상태가 바뀔때만 컴포넌트가 리렌더링 되는 반면,

Context API를 사용할 때에는 그러한 최적화가 자동으로 이루어져있지 않기 때문에 Context가 지니고 있는 상태가 바뀌면 해당 Context의 Provider 내부 컴포넌트들이 모두 리렌더링 됩니다.

 

3. 하나의 커다란 상태

Context API를 사용해서 글로벌 상태를 관리 할 때에는 일반적으로 기능별로 Context를 만들어서 사용하는 것이 일반적입니다.

반면 리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수입니다. 때문에 매번 Context를 새로 만드는 수고로움을 덜 수 있습니다.

 

---

참고:

https://react.vlpt.us/redux/

6장. 리덕스 · GitBook