리액트 ContextAPI

1 App function 밖에 입력(범위 생성)

let 재고context = React.createContext();

 

2. 같은 값을 공유할 HTML을 범위로 싸기

<재고context.Provider value={재고}>
    <div className="row">
      {shoes.map(function (a, i) {
          return <Card shoes={a} i={i} key={i}></Card>;
      })}
     </div>
</재고context.Provider>

<재고context.Provider>로 싸여진 콤포넌트는 props전송없이 재고라는 state가 사용가능하다.

 

3. useContext import

import React, { useState, useContext } from "react";

4. Card콤포넌트 안에 재고 변수안에 값을 입력하고 재고 변수 사용하기

let 재고 = useContext(재고context);