Context API

props문법을 사용하지 않고 하위 컴포넌트와 같은 값을 공유하는 방법

 

import { useContext } from 'react';

let stockContext = React.createContext();   // 범위 생성 문법

<div className="container">
      // 위에 context로 선언한 변수를 이용하여 아래처럼 작성한다. value라는 이름은 고정값이다.
      // 이렇게 작성하고 나면 해당 블록 안에서는 stock을 공통으로 공유한다.
	<stockContext.Provider value={stock}>
	<div className="row">
	{
  		shoes.map((data, index) => {
  			return <ShoesInfo key={index} data={data} history={useHistory()}/>
  		})
  	}
	</div>
    </stockContext.Provider>
</div>

function ShoesInfo(props) {
	// useContext라는 훅을 이용하여 stockContext를 변수에 담았다. 이제 사용 가능하다.
	let stock = useContext(stockContext);

	return (
    	<>
    	<div className="col-md-4">
        <p>{ stock }</p>
        </>
	)
}