(React) 쇼핑몰 만들기 - Context API

props 의 회귀적 특성이 여러 Component들이 중첩이 되어있을 때는 state를 넘겨주는데 매우 번거로운 과정의 원인이 될 수 있다.

그 대체법의 하나로 Context API 를 사용하는 것이다.

상위 Component에 import코드 부분에 아래코드로 보관함을 생성해준다.

export const 보관함 = createContext();

테스트용으로 재고 state를 생성해준다.

const [재고] = useState([10, 11, 12]);

Context 사용할 Component 를 아래와 같은 태그로 감싸준다.
이렇게 하면 Detail Component 뿐만 아니라 그 자식 Component 들 모두에서 Context 를 사용할 수 있다.

 <Route
	path="/detail/:id"
	element={
        <보관함.Provider value={{ 재고, shoes }}>
          <Detail shoes={shoes} />
        </보관함.Provider>
      }
    />

Detail.js 에서 보관함을 import 해준다.

import { 보관함 } from "../App";

사용하고 싶은 Component에서 다음과 같은 코드를 작성하게 되면 state를 props 없이 사용 가능하다.

const { 재고, shoes } = useContext(보관함);
.
.
{재고}

Context API의 단점

1. 감싸는 Component 안에서 value 값으로 넘겨준 state를 사용하지 않는 부분도 state 값이 변경되면 무조건 재랜더링되는 비효율성이 존재한다.
2. 다른 페이지에서 Context의 state를 사용한 Component의 재사용이 어렵다.
3. 위 같은 단점들이 존재하기 때문에 실제로는 많이 쓰이지 않고 redux 같은 외부 라이브러리를 많이 사용한다.