[React] Context API vs Redux

프로젝트를 진행하면서 리액트 학습 중 Context API를 배우게 되었다. 상태관리를 위해 Redux를 사용해보는 건 어떻냐라고 팀과 얘기를 하는 중이었는데, Context API가 Redux가 하는 역할과 너무 비슷한 기능을 제공해주는 것 같았다.

그러면  Context는 왜 사용하고 Redux 대신 사용할 수 있을까 라는 궁금함이 들었다.

기술선정을 위해 둘의 차이를 확실하게 알고 선택하기 위해 차이점에 대해 정리하게 되었다.

 

 

상태관리란?

상태관리는 시간이 지남에 따라 상태가 변경되는 방식을 의미한다.

예를 들어 이런 경우를 상태관리라고 한다.

• 초기 값을 저장한다.
• 현재 값을 읽을 수 있다.
• 값을 업데이트 할 수 있다.

 

React의 useState()가 상태관리의 예라고 할 수 있다.

• hook을 호출해 초기 값을 저장한다.
• hook을 호출해 현재 값을 읽는다.
• 제공되는 setState 함수를 호출해 값을 업데이트 한다.
• 컴포넌트가 재렌더링 되었기 때문에 값이 업데이트 되었음을 확인할 수 있다.

 

요약

1. Context API와 Redux는 같은 일을 하나?

• Context API와 Redux는 서로 다른 도구이며, 다른 목적을 가지고 있음

2. Context는 상태관리 도구인가?

• 아님! Context API는 값을 관리하는 게 아니라 전역적으로 값을 사용할 수 있도록 상태를 공유해주는 역할을 함. 값을 전달하는 pipe와 같은 것!
  컨텍스트 안에 포함된 모든 레벨에서 명시적으로 props를 전달하지 않고 어디서든 상태값에 접근할 수 있는 방법을 제공한다.

3. 언제 Context API를 사용해야 할까?

• 부모에서 멀리 떨어진 자식 컴포넌트로 props를 전달할 경우, 사용하지 않는 컴포넌트에 단순 전달 목적으로 props 전달하는 걸 피하고자 할 때

4. 언제 Context API + useReduce를 사용해야 할까?

• 특정 컴포넌트에서 어느 정도 복잡한 상태 관리가 필요한 경우

5. 언제 Redux를 사용해야 할까?

• 여러 위치에 많은 양의 양의 상태 값이 존재할 때
• 업데이트 로직이 복잡할 때
• 거대한 코드 베이스를 여러 사람이 작업할 때
• 상태 변경 시각화가 필요할 때
• 사이드이펙트, 메모이제이션, 데이터 직렬화 등을 위해 더 강력한 기능이 필요할 때

 

 

React Context란?

Context 등장 배경

React는 단방향 데이터 흐름이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 직접 전달한다. 하지만 이런 단계가 깊어진다면 문제가 복잡해진다. 부모 컴포넌트(1번)가 자식 컴포넌트(6번)에게 데이터를 전달하려고 하면 1->2->4->6의 단계를 거쳐서 전달을 하게 된다.

 

한 가지 복잡한 상황이 하나 더 발생할 수 있다.

예를 들어 6번에 있는 상태를 다시 5번 컴포넌트에서 필요로하게 되면 상태를 끌어올려야 한다.

 

이런 복잡한 데이터 흐름을 해결하기 위해 Context API가 등장하게 되었다. 

Context를 통해 전역으로 데이터를 사용할 수 있도록 해서 위와 같은 문제를 해결한다.

 

 

따라서 Context는 상태 관리가 아니라 상태를 전역으로 사용할 수 있도록 해주는 상태 공유의 역할을 하며 

일종의 값을 전달하는 pipe 라고 생각할 수 있다.

 

 

Context  + useReducer

useReducer는

• 값의 저장
• reducer 함수
• action 전달
• 값을 전달하고 컴포넌트에 읽는 방법 

과 같은 Redux + React-Redux와 비슷한 구조를 가지고 있다.

 

 

어떤 문제점이 있을까?

useReducer의 경우 새로운 상태 값을 생성할 때 해당 Context 내부에 포함된 컴포넌트들이 상태 값의 일부에만 관심이 있어도 강제로 재렌더링 되기 때문에 성능 문제가 발생할 수 있다.

 

Context의 경우 Provider에 새로운 값이 지정되어 있는지 매번 확인하기 때문에 그 값이 새로운 값일 경우 리렌더링이 발생하게 되며 해당 Provider 하위에서 context를 구독하는 모든 하위 컴포넌트도 다시 재렌더링이 된다. 

 

이렇게 불필요한 재렌더링을 줄이고 문제의 범위를 지정하기 위해서는 개별 컨텍스트를 설정하고 React.memo, useMemo 등을 이용해 최적화할 수 있다. 하지만 이럴 경우 React-redux 직접 구현하는 거랑 비슷!

 

 

 

Redux란?

Redux는 상태를 관리한다.

 

Redux는 어떻게 동작하는가?

Redux는 상태를 관리하기 때문에 앞에서 말했던 것처럼 아래의 기능을 수행할 수 있다.

• 초기 값을 저장한다. >> store의 초기 값을 지정할 수 있다.
• 현재 값을 읽을 수 있다. >> mapStateToProps, useSelector를 통해 state를 읽을 수 있다.
• 값을 업데이트 할 수 있다. >> Reducer에 Action 객체를 전달(Dispatch)해서 state를 업데이트 할 수 있다.

 

리덕스 흐름

Redux를 위와 같은 흐름으로 나타낼 수 있다. 

 

 

또한 Redux는 저장소 상태의 특정 부분만 사용하고 해당 값이 변경될 때만 재렌더링이 일어나기 때문에 재렌더링

관련 이슈도 최적화를 해준다

 

정리

Redux와 Context API는 역할이 다르다!

• Context는 전역으로 상태를 공유할 수 있게 하는 상태 공유 기능
• Redux는 store라는 중앙 저장소에서 상태를 저장 및 관리하는 상태 관리 기능

그렇기 때문에 Context를 Redux 대신 사용할 수는 없다!

 

Context + useReducer를 통해 Redux 대신 상태 관리를 할 수 있지만 렌더링 이슈가 존재한다. Redux를 사용할 만큼 큰 프로젝트가 아니라면 Context + useReducer를 사용할 수 있을 듯 하다.

 

---

참고자료

Context API vs Redux

Context API vs Redux

 

useReducer

React Hooks: useReducer 사용법

 

Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까?