context api 2

[React] 내부 API로 편하게 전역 상태 관리하기, Context API

오늘은 다양한 React 상태 관리 라이브러리 중 Context API에 대해 알아보겠습니다. [React] 상태 관리 라이브러리, 어떤 것을 선택해야 할까?React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다. 현재 사용되고 있는 React 상태 관리 라이브러리는 제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, Reami-dairy.tistory.com  React에서 부모 → 자식 → 자식의 자식... 순으로 데이터를 전달할 때 보통 props를 사용합니다.하지만 이 방식은 트리 구조가 깊어질수록 문제가 발생할 수 있습니다.데이터를 실제로 사용하지 않는 중간 컴포넌트들까지도 props를 계속 물려주어야 하는, Props ..

[React] useContext와 Context API

useContext React는 대개 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 data를 전달하는 구조이다. App의 규모가 작으면 props로 충분하지만 규모가 커지면 필요없는 상위 컴포넌트들이 하위 컴포넌트들에게 props를 전달해주기 위해 props를 가지고 있어야 되고 props의 이름을 수정하게 된다면 일일이 다 수정해줘야 하므로 유지보수하기 힘들고 복잡해진다. 또한 테마나 언어와 같은 전역적인 data 같은 경우 모든 컴포넌트가 이 data를 갖고 있어야 하므로 단계별로 전달해야하는 props로만 data를 관리하는 건 어렵다. 이를 해결하기 위해 Context API를 사용하는데 Context는 App 안에서 전역적으로 사용되는 data들을 여러 컴포넌트들이 쉽게 공유할 수 있는 ..