props 이단 전송은 너무 귀찮음

이단 전송 뿐 아니라, 삼단, 사단… 수도 없이 전송해줘야할 수도 있음.

props 싫으면

1. ContextAPI(리액트 기본문법)
2. Redux등 외부 라이브러리

Context API 쓰면 props 전송없이 state 공유 가능

그러나 잘 쓰지 않는데 이는 ,

1. 성능 이슈
2. 컴포넌트 재활용이 어렵기 때문임.

그러므로 이번 시간엔 그냥 단순히 알아보고 넘어가고

다음 시간 Redux 를 배워서 사용해보자!

Context API 사용방법

1. state 생성, createContext()

App.js 파일에서

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

위와 같이 state를 만들어두고

context를 만들어준다.

let Context1 = createContext();

context란 state 보관함으로 보면 된단다…

2. <Context>로 원하는 컴포넌트 감싸기

<Context1.Provider value={{ 재고 }}>
	<Detail shoes={shoes} />
</Context1.Provider>

공유하고 싶은 state를 value 안의 중괄호 두개치고 쓰면 된다.

3. state를 사용하려면

Detail.js 에서

1. context import
2. useContext 사용

context import

import { Context1 } from './../App';

useContext

let { 재고 } = useContext(Context1);

위와 같이 사용하면 된다.

이렇게하면 그(Detail.js) 자손인 재고라는 변수를 TabContent에서도 사용할 수 있다.

단점

재렌더링이 되면, 재고 안쓰는 자식 컴포넌트 전체적으로 재렌더링이 되므로 성능이슈가 있다.

자식 컴포넌트가 context 를 쓸 때, 그걸 다른 페이지에서 import하면 문제가 생길 수 있다.