210714 context API

props를 여러개 쓰기 싫다면

context: 하위 컴포넌트들이 props 없이도 부모의 값을 사용

1. 범위생성

let stockContext = React.createContext(); //같은 변수값을 공유할 범위생성

2. 같은 값을 공유할 HTML을 범위로 묶어주고 value={ 공유를 원하는 값 } 추가해주기
   card 컴포넌트에다가 재고 값을 공유하도록 하자

<stockContext.Provider value={재고}>
  <div className="row">
    {
     shoes.map((a, i) => {
     return <Card shoes={shoes[i]} i={i} />
    })
  }
 </div>
 </stockContext.Provider>

3. 사용하고자하는 컴포넌트 안에서 useContext()로 사용
   useContext()는 훅이기 때문에 자동으로 import 됨.

function Card(props) {
  let stock = useContext(stockContext); 
  //stockContext로 공유된 데이터를 사용하겠다
  
  return (
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes' + (props.i + 1) + '.jpg'} width="100%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  )
}

다른 js파일에서도 공유하고 싶다면
1. 우선 <stockContext.Provider>태그로 detail 컴포넌트를 감싸주고

      <stockContext.Provider value={재고}>
            <Detail shoes={shoes} 재고={재고} 재고변경={set재고}/>
      </stockContext.Provider>

2. stockContext를 App.js에 선언해줬기 때문에 export & import
   (App.js에서 범위 변수 앞에 export, Detail.js에서 import {stockContext} from '/.App.js')

import {stockContext} from './App.js'

3. detail.js에 let stock = useContext(stockContext);

✨간단한 데이터를 전송하는데는 props가 가장 간단하지만, 컴포넌트 안에 컴포넌트가 여러개 중첩되면 context를 사용하는 것이 편리하다.