쇼핑몰 프로젝트(Context API)

코딩애플 님의 강의를 바탕으로한 글입니다:)

앞서 학습한 중첩 컴포넌트의 경우 props로 많은 컴포넌트들의 상위 컴포넌트의 기능을 가져다 쓸 수 있다.
하지만, 컴포넌트가 무수히 많아지다보면 props지옥을 맛볼 것이고, 이 것을 해결해 줄 수 있는 API가 ContextAPI다.

Context API

우선 다음과 같이 변수를 선언한다. 재고context 변수는 이제 범위를 가지는 특별한 컴포넌트가 되었다.

이 변수도 컴포넌트이니 태그값을 줄 수 있다. 다음과 같이 태그 값을 주면 되고, value에 저장된 값은 사용아 가능하다는 뜻이다.
즉, 아래의 카드를 해석해보면, 재고context 태그로 묶인 Shoes 컴포넌트는 이제 재고 state를 가져다 쓸 수 있는 것이다.(props 작성 없이)

마지막으로, Shoes 컴포넌트 속에 useContext()라는 훅을 이용하여 사용을 원하는 context를 불러와야 한다. 즉, 재고context에 들어있는 state를 변수로 저장해서 사용하겠다는 뜻이다.
이제 재고 변수에는 재고 state 데이터가 저장된 것이고, {재고}와 같이 데이터바인딩해서 사용하면 된다.
(useContext 훅을 쓰려면 상단에 'react' 로부터 import)

정리)

1. React.createContext()로 범위 생성
2. 같은 값을 공유할 HTML을 태그(범위)로 싸매기
3. useContext(범위)로 공유된 값 사용하기

잠깐) 만약 다른파일에서도 같은 기능을 쓰고 싶으면 과정은 모두 같다. 하지만, 파일이 서로 다르므로, export, import 해오면 된다.

<App.js 파일>
export let 재고context = React.createContext();

<Detail.js 파일>
import {재고context} from './App.js';

참고)
Redux 라이브러리
: 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장공간 생성 가능 + state 데이터 관리기능