Context API는 props drilling을 해결하기 위한 방법이다
context value를 생성하고 다수의 컴포넌트 혹은 앱의 모든 컴포넌트를 묶어준다.
이것의 장점은 state와의 연결이 쉽다는 것이다.
state를 해당 context에 연결하면 앱전체에 공급되는 방식이기 때문이다
위와 같은 형태이다
사용을 위해서 createContext를 import 해준다
그 후 createContext() 에 초기값을 정해준다 현재 객체를 저장해주었다
이제 앱에 이 context를 제공해 주어야한다 따라서 이 context를 필요로 하는 모든 컴포넌트를 담고 있는 컴포넌트를 열어준다. 예를 들면 App 컴포넌트 같은 것이다
위와 같이 App 컴포넌트의 jsx에서 Header와 Shop 컴포넌트를 CartContext.Provider로 감싸준다. 이때 Provider 속성은 직접 생산한것이 아니라 React 에서 제공하는 것이다
이제 이를 사용하기 위해 Cart 컴포넌트에서 useContext와 CartContext를 import 해준다
그 후 context 연결구조를 다음과 같이 만든다
그러면 더이상 items를 props로 전달해주지 않아도 된다
만약 더 편하게 사용하고 싶다면 구조분해 할당을 통해 다음과 같이 사용가능하다
중요한건 CareContext.Provider에 값속성을 추가해주어야만 한다.
위와 같이 값속성을 추가 해주고 context 값 또한 제공해 주어야 한다.
이때 value를 state와 연결해주기 위해
shoppingCart를 적용해주면 context가 state에 연결된다
