문제

구조를 짜는동안 component 안에 component 들이 수없이 많아지면서 props로 일일히 받아야 되는 상황이 되었다.

수많은 props들 !

해결

useContext 사용하기

먼저 전역 변수로 createContext 를 사용한다

import React, { useContext } from 'react';

useContext import 추가 해주고

let stockContext = React.createContext()

전역에 변수로 선언해준다.

적용 하고싶은 돔 영역에 에 변수 태그.Provider 를 추가해준다.

 <stockContext.Provider value={stock}>
  <div className="row">
  </div>
 </stockContext.Provider>

value : 추가해주고 싶은 데이터 선언

function Card( props ) {
 let id = props.shoes.id + 1
 /* usecontext 훅 사용 */
 const letStock = useContext( stockContext )

 return (
   <div className="col-md-4">
     <img src={`https://codingapple1.github.io/shop/shoes${id}.jpg`} alt="" width="100%" />
     <h4>{props.shoes.title}</h4>
     <p>{props.shoes.content} & {props.shoes.price}</p>
     <Button as="input" type="reset" value="더보기" />
     <p>재고 : {letStock[props.shoes.id]}</p>
   </div>
 )
}

함수 안에 전역 변수를 안에서 선언해준 변수의 useContext 안에 넣어줌 useContext( stockContext )

   <p>재고 : {letStock[props.shoes.id]}</p>

이렇게 사용하면 된다

다른파일 import 해서 사용해보기

App.js

// import 할 변수를 선언
export let stockContext2 = React.createContext()

Detail.js

//app.js 에서 받아온 변수
import { stockContext2 } from './App.js'

function Detail( props ) {
 //변수 선언
 const context = useContext( stockContext2 )
   return (
       <div>test {context} </div>
   )
}

이렇게 사용하면 된다!

깨달음

컴포넌트가 많아지면서 props 사용이 점점 복잡해 졌는데 useContext 를 사용하니 props 로 복잡하게 관리 할 수고를 덜어 주어 코드가 더 짧아지고 덜 복잡하게 데이터를 보여줄 수 있었다.