Context API

일반적으로 전역적으로 필요한 상태(state)를 관리 해야 할 때는

최상위 컴포넌트인 App의 state에 넣고 컴포넌트 간에 props로 전달합니다.

위와 같이 props로 상태를 전달 할 경우 prop drilling이 일어날 수 있고, 유지 보수성이 매우 안좋습니다.

Context API는 전역 상태 관리 방법 중 하나로써 React 패키지에서 제공하는 툴입니다.

Context API를 사용하면 Context를 만들어 props 없이도 한번에 원하는 값을 받아와서 사용 할 수 있습니다.

더 자세한 예제와 설명은 전에 포스팅 했던 내용을 참고

[React] useContext + Context API

[ Context란? ] React로 만든 앱은 여러개의 컴포넌트로써 최상위 APP 컴포넌트로 부터 시작되어 트리 형태로 이루어져 있습니다. 일반적인 데이터 흐름은 위에서 아래로 진행 됩니다. 즉, 부모에서

eundol1113.tistory.com

[실전 프로젝트] history => Context API / useContext

[ 피드백 ] history → Context API 전역 음원을 재생 할 때 history에 음원 정보나 audio 객체를 담아서 사용했는 데 history 보다는 Context API를 사용하는 것이 코드도 훨씬 간결 해지고 리펙토링면에서도..

eundol1113.tistory.com

Redux와 Context API의 차이점

- 미들웨어를 사용 할 수 있다.

: 비동기 작업을 더욱 체계적으로 관리 할 수 있다.

- 유용한 함수와 Hooks를 지원 받는다.

: Context에 관한 여러가지 설정과 Hooks를 직접 만들지 않아도 된다.

connect, useSelect, useDispatch, useStore 등을 제공하여 상태를 쉽게 조회 하거나 dispatch를 쉽게 할 수 있다.

- 기본적인 최적화가 되어 있다.

: 상태를 받아와서 사용 할 때 기본적인 최적화가 이미 되어 있기 때문에

필요한 상태가 바뀔 때만 리렌더링이 되는 기능이 탑재 되어 있다.

- 하나의 큰 상태

: context api는 기능별로 context를 만들어 사용하지만 redux는 모든 글로벌 상태를

하나의 커다란 객체에 넣어서 사용하는 것이 필수이다. 때문에 매번 context를 만드는 수고를 덜어 줄 수 있다.

- DevTools

: 현재 상태를 한눈에 볼 수 있는 기능, 지금까지 어떤 변화가 있었는지 볼 수 있는 기능,

특정 시점으로 상태를 되돌릴 수 있는 기능 등 DevTool을 제공한다.

[react] Context와 Redux의 차이점

이번 프로젝트에서 상태 관리 시 redux와 context Api 중 어떤 것을 써야 할지 고민을 하다가 둘의 차이점에 대해서 알아보았다.비동기 작업을 더욱 체계적으로 관리 가능하다.context에 관한 여러 가

velog.io

비 오는 날 개구리