[React] Context API vs Redux

💡 Context API란?

일반적인 React에서 prop 전달의 흐름은 하향식이다. (부모에서 자식으로) 전달되는 prop이 많아지고 컴포넌트 깊이가 깊어지면 관리가 번거로워 질 수 있다. Context Tree는 컨텍스트 안에 포함된 모든 레벨에서 명시적으로 prop을 전달하지 않고, 어디서든 상태값에 접근 할 수 있는 방법을 제공한다.

Context는 아무것도 관리하지 않는다. 단순한 값을 전달하는 파이프와 같다. 사용하는 주요 목적은 prop-drilling을 피하는 것이다. prop-passing 로직을 작성할 필요가 없기 때문에 코드가 단순해진다.

💡 Redux란?

애플리케이션 전체에 대한 상태 중앙 저장소 역할을 하며 액션이라는 이벤트를 사용하여 에플리케이션의 상태를 예측 가능한 방식으로 업데이트 하기 위한 패턴 또는 라이브러리이다.

Redux에서 제공하는 패턴과 도구들을 사용하면 상태가 언제, 어디서, 어떻게, 왜 업데이트 되었는지 쉽게 이해 할 수 있다.

• 상태 관리
• Redux의 목적은 시간이 지남에 따라 상태 값들이 어떻게 변하는지 쉽게 이해할 수 있도록 돕는것이다.

React에서 Redux를 사용할 때 사용되는 React-Redux 라이브러리는 Redux에서 상태 값을 읽고 action을 React 컴포넌트에게 전달하여 Redux 저장소와 상호 작용 할 수 있도록 도와주는 UI바인딩 레이어이다.

React-Redux 를 사용하면 애플리케이션의 모든 React 요소들이 Redux 저장소에 접근이 가능한데 이는 React-Redux 내부에서 Context 를 사용하기 때문이다. 여기서 주의할 점은 React-Redux 는 현재의 상태값이 아닌 Context 를 통해 Redux 저장소 인스턴스만 전달한다는점이다.

Redux 목적

• UI 레이어와 분리된 상태 관리 로직 작성이 필요할 때
• 서로 다른 ui 계층간에 상태 공유가 필요할 때
• Redux 미들웨어 기능을 빌려 액션이 전달 될 때 추가적인 로직이 필요할때

⭐️ Context가 상태 관리가 아닌 이유

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

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

React useState와 useReducer가 상태 관리의 좋은 예이다.

• hook을 호출하여 초기 값 저장
• hook을 호출하여 현재 값을 읽는다
• 제공된 setState, dispatch 함수를 호출하여 값을 업데이트한다.
• 구성요소가 re-render 되었기 때문에 값이 업데이트 됐음을 확인 할 수 있다.
• 마찬가지로 Redux, Recoil, Mob x 도 위의 조건들을 충족하기 때문에 상태관리라 할 수 있다.

Context의 경우 위의 조건을 충족하지 않는다. Context는 전달되는 값을 결정하는 역할을 하고 일반적으로 실제 상태 관리는 useState/useReducer hook과 함께 발생한다.

Context는 상태(이미 존재하는, 어딘가에 있는)가 Context Tree 내부에 포함된 다른 컴포넌트들과 공유되는 방식이다.

Context와 useReducer

useReducer는 Redux + React-Redux와 비슷한 구조를 가지고 있다.

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

기능과 동작에는 차이점이 많음

• Context + useReducer는 Context를 통해 현재 상태 값을 전달하는데 의존.
  React-Redux는 Context를 통해 현재 Redux 스토어 인스턴스를 전달한다.

• useReducer의 경우 새로운 상태 값을 생성 할 때 해당 Context 내부에 포함된 컴포넌트들이 상태 값의 일부에만 관심이 있더라도 강제로 re-render 되기 때문에 성능 문제가 발생할 수 있다.
  re-render 되기 때문에 성능 문제가 발생 할 수 있다. React-redux를 사용하면 저장소 상태의 특정 부분만 사용하고 해당 값이 변경 될 때만 re-render 할 수 있다.

• Context + useReducersms React의 기능이기 때문에 React 외부에서는 사용이 불가하다. Redux는 UI 독립적이기 때문에 React와 별도로 사용이 가능하다.

• useReducer는 미들웨어가 없다.

Context API + useReducer는 낮은 규모와 빈도의 업데이트와 같은 정적인 상태의 전달에는 괜찮지만, Flux와 유사한 상태 전파의 대체물로는 부족하다.

최종 정리

• 단순 prop-drilling을 피하는 것이 목적이라면 Context를 사용하자.

• 적당히 복잡한 컴포넌트가 있거나 외부 라이브러리를 사용하고 싶지 않다면 Context +useReducer를 사용해라

• 특정 구성 요소만 re-render 시키거나, 사이드이펙트를 줄이기 위해 더 강력한 기능이 필요하다면 Redux + React+Redux를 사용