Context API vs Redux

Wonhyo LEE·2022년 12월 15일
0

이둘의 기능은 비슷하게 생각되면서도 알고보면 정말 다르다

Context API

Context 는 실제로 아무것도 관리하지 않는다. 단순 값을 전달하는 파이프와 같다. 사용하는 주요 목적은 prop-drilling 을 피하는 것이다.
상태관리는 일반적으로 useState 와 useReducer 를 통해 일어난다.

Redux

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

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

요약

Context 와 Redux 는 같은 일을 하나

  • 둘은 다른 도구이며, 다른 목적을 가지고 있다.

Context 는 상태관리 도구인가 ?

  • 아니다. Context API 는 단지 종속성 주입의 한 형태일뿐 아무것도 관리하지 않는다. 상태관리는 일반적으로 useState 와 useReducer 를 통해 일어난다.

useReducer 는 Redux 의 대체품인가 ?

  • 그렇지 않다. 유사한 부분들이 있지만 기능에는 큰 차이가 존재한다.

언제 Context 를 사용해야하나

  • props drilling 을 피하고자 할 때

언제 Context 와 useReducer 를 사용해야 하나

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

Redux 는 언제 사용해야하나

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

결론

  • 단순 prop-drilling 을 피하는 것이 목적이라면 Context 를 사용해라
  • 적당히 복잡한 컴포넌트가 있거나 외부 라이브러리를 사용하고 싶지 않다면 Context + useReducer 를 사용해라
  • 특정 구성 요소만 re-render 시키거나, 사이드이펙트를 줄이기 위해 더 강력한 기능이 필요하다면 Redux + React-Redux 를 사용해라
profile
프론트마스터를 꿈꾸는...

0개의 댓글