[React] 2. Context API

props가 많아질경우 관리하기가 매우 까다롭다. 이를 간단하게 해결하기 위해 Context API 문법이 존재->하위 컴포넌트들이 props 없이도 부모의 값을 사용가능

기존의 재고 state를 이용, state값을 공유할것이다.

createContext() 이용 변수 만들기

let 재고context = React.createContext();

같은 변수값을 공유할 범위를 생성하는 것이다
그리고 같은 값을 공유할 HTML을 범위로 감싸준다

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

공유하고 싶은 데이터를 value속성을 통해 넣어준다.
이제 props 공유 없이도 '재고' 데이터를 맘대로 쓸수있다

function Shoes({ shoes, idx }) {
  
  let 재고 = useContext(재고context);
 .
 .
 .

사용하고 싶은 컴포넌트에서 변수를 하나 선언한후 useContext('설정한 범위')함수 를 사용한다

.
.
 <p>{shoes.content}</p>
    {재고[idx]}

사용하고 싶은곳에서 알맞게 사용하면 props없이도 state의 값이 전달 되었다

문법이 약간 복잡하기 때문에 컴포넌트가 많아 props사용이 까다로울때 쓰자

테스트 해보기 위해 또다른 컴포넌트를 만들었다

function Test() {
  return <p>재고: </p>;
}

현재 App->Shoes->Test 컴포넌트가 있는 상태이다

function Test({ idx }) {
  let test = useContext(재고context);

  return <p>재고: {test[idx]}</p>;
}

직전에 Shoes 컴포넌트를 context로 감쌌기 때문에 하위 컴포넌트인 Test에서도 그대로 사용 할 수있다. 변수만 잘 선언해주면 된다

다른 파일 컴포넌트에 state를 전달하고 싶다면?

 <Route path="/detail/:id">
       <재고context.Provider value={재고}>
          <Detail shoes={shoes} info={재고} 재고변경={재고변경} />
       </재고context.Provider>
 </Route>

똑같이 걍 감싸준다

//Detail.js
let 재고 = useContext(재고context);

다른 파일에서 그대로 사용하면 에러가 뜬다 왜??
현재 만든 context 범위는 App.js이기 때문

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

간단히 변수에 export를 붙여서 내보내주면 된다

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

import도 잊지 말기

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)