Context API

props를 대체하여, 컴포넌트간의 state 전송을 원활하게 해주는 리액트 기능.
일종의 state 보관함

어떻게 써요?

Context로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 적으면 끝
export해주고, 필요한 곳에서 import

(App.js)
//컨텍스트 하나생성
export let 재고context = React.createContext();

function App(){
  //예시용 state
  let [재고, 재고변경] = useState([10,11,12]);

  return (
    //Context1로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 적으면 끝
    <재고context.Provider value={ {재고, shoes} }>
      <Detail shoes={shoes}/>
    </재고context.Provider>
    
  )
}

(Detail.js)
//import 하기
import {useState, useEffect, useContext} from 'react';
import {재고context} from './../App.js';

function Detail(){
  let {재고} = useContext(Context1)

  return (
    <div>{재고}</div>
  )
}

단점

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 됨
2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 귀찮아짐.

그래서 이것 보다는 redux 같은 외부라이브러리를 많이들 사용함.

결론

redux 쓰자