React (4)

Context API

• 컴포넌트는 트리 구조로 이루어져 있어, 프론트 개발을 하다보면 트리 레벨이 깊어지게 된다.
  레벨이 깊은 트리 구조에서 최상위 컴포넌트와 최하위 컴포넌트에서 prop 을 주고 받고 싶다면 중간에 있는 컴포넌트를 거쳐 차례차례 넘겨줘야 할 것
  또한 공통 상위 컴포넌트가 최상위 컴포넌트 하나뿐인 컴포넌트 사이의 prop 교환은 더욱 많은 컴포넌트를 거쳐야 할 것
• 위처럼 사이의 여러 컴포넌트를 타고 prop 을 전달해줘야 하는 상황을 Prop Drilling 이라고 한다.
  Prop Drilling 을 해결하기 위해서는 Context API(React 라이브러리에서 기본으로 제공), Reduce, Recoil, Mobx 등의 도구가 있다.

Context API 구조

• Context API 는 데이터를 제공해 줄 Context Provider 와 데이터를 받을 Context Consumer 가 있다.
• 데이터는 Provider 가 관리하고, Consumer 는 데이터를 필요한 컴포넌트에 전달하는 역할을 한다.
• 하위 컴포넌트에서 데이터가 변경되면
  변경된 데이터를 Consumer 에서 Provider 로 업데이트 하고, Provider 가 업데이트 되면 Conumer 가 반응형 프로그래밍을 통해 다시 연산되고, 컴포넌트는 리렌더링이 된다.
  

---

TO-DO 를 통한 Context API

• uuid: 랜덤으로 ID 값을 생성해 줌
  npm i uuid / yarn add uuid
import { v4 } from 'uuid' ... id: v4()

---

회고

오늘은 Context API 와 이를 간단히 활용해보는 TODO APP 을 구성해보았다.
조금은 리액트에 익숙해지는 것 같긴 하지만 아직 막히는 부분이 부분부분 존재해서 더 공부해봐야 할 것 같다..