[React js] props 대신 쓸 수 있는 context API

1. 범위를 생성한다

let 재고context = React.createContext();

2. 같은 값을 공유할 범위를 지정한다

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

3. 변수로 받아오기 & 사용하기

function Card(props) {

  let 재고 = useContext(재고context);

  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 } & { props.shoes.price }</p>
      {재고[props.i]}
    </div>
  )
}

export default App;​

hook이기 때문에 자동으로 import 할  수 있음

 

 

 

 

 # 다른 파일(Detail.js)에서도 context를 쓰는 방법 

 

1. 생성한 범위 앞에 export를 붙여준다.

export let 재고context = React.createContext();

2.  위에서처럼 같은 값을 공유할 범위를 지정한다.

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

3. Detail.js에서 import 해준다.

import {재고context} from './App.js';

4. 똑같이 변수를 받아오고 사용하면 된다.

let 재고 = useContext(재고context);

 

 

 

 

component가 많아질수록 props가 불편해서 context를 썼는데 여전히 불편함이 느껴진다. Redux를쓰면 더 편한 기능을 쓸 수 있다.

 

Redux 라이브러리: 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장공간 생성가능
+state 데이터 관리기능