props 대신 Context API

App.js의 state를 하위 컴포넌트 안에 있는 컴포넌트에서 쓰려면 props활용이 많아서 복잡해진다.

props 대신 context를 쓰면 하위 컴포넌트들이 props 없이도 부모의 값을 사용가능하다.

 

context만드는 방법은

먼저, React.createContext()를 App함수 위에 만들어준다.

let 재고context = React.createContext(); 
//let 작명 = React.createContext();

createContext는 같은 변수값을 공유할 범위를 생성한다. 그리고 여기선 그 범위 이름을 재고context라고 지었다.

 

그리고나서, 같은 값을 공유할 HTML을 범위로 싸매야한다.

import { useContext } from 'react';

let 재고context = React.createContext(); 

function App() {
	
    let [재고, 재고변경] = useState([10,11,12]);
    return (
    	<재고context.Provider value={재고}> //value={공유하고싶은 데이터}
            <div className="row">
                {
                  shoes.map( (a,i) => {
                    return <ShopList shoes={shoes[i]} i={i} key={i}/>
                  })
                }
            </div>
         </재고context.Provider>
    )
}
function ShopList(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}</p>
              <p>{props.shoes.price}원</p>
              {재고[props.i]}
        </div>
    )
}

위 처럼, 이름.Provider태그로 공유할 html을 감싸주고, 태그 안에 value를 이용해 공유하고 싶은 데이터를 담아준다.

그러면 저 감싸진 안에는 재고라는 state를 자유롭게 사용가능하다.

그러곤, 사용할 공간에 let 작명 = useContext(범위이름);를 쓰면 상단에 import가 되어진다.

그 다음, i도 부모에서 받아왔기에 {재고[props.i]}로 재고라는 10 11 12에서 10부터 차례대로 보여주게끔 적을 수 있다.

 

불편하지만 아래 경우엔 편하기도하다.

function ShopList(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}</p>
              <p>{props.shoes.price}원</p>
              <Test></Test>
        </div>
    )
}

function Test() {
	let 재고 = useContext(재고context);
	return (<p>{재고}</p>)
}

이렇게 Test함수도 ShopList함수 안에 들어가기에 props없이도 사용할 수 있다.

 

만약, 다른 파일에 값을 공유하고 싶다면,

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

해주고, 다른 파일에

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

import하고  똑같이 App.js파일에서 Provider로 감싸고  쓰는 파일에서 useContext를 이용해 똑같이 사용하면 된다.

 

예외로 Redux라는 라이브러린 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성하는 것을 말한다.