[React] 리덕스와 context 차이점과 사용하는 곳

옥수수의 코딩이야기·2023년 2월 5일
0

기술

목록 보기
5/5
post-thumbnail

리덕스와 context 차이점과 사용하는 곳

차이점

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를 새로 만드는 수고로움을 덜 수 있습니다.

결론

오직 전역 상태 관리를 위한다면 Context API를 사용하라.
상태 관리 외에 여러 기능이 필요하다면 Redux 를 사용하라.
high-frequency한 어플리케이션의 경우 Context API를 사용하면 성능상 이슈가 있을 수 있다.

참고
https://sewonzzang.tistory.com/m/53 차이
https://velog.io/@cada/React-Redux-vs-Context-API 사용되는 곳
https://egg-programmer.tistory.com/281 차이와 사용법

profile
프론트엔드 공부중 기억은 블로그가 대신합니다.

0개의 댓글