1. Context API란?

• props 연속 사용이 싫다면 Redux 혹은 Context API를 사용하여 하위 컴포넌트끼리 state값을 똑같이 공유할 수 있다.

2. 사용방법

1. Context API 세팅

   let 재고context = React.createContext();
   
   function App(){
     let [재고, 재고변경] = useState([10,11,12]);
   
     return (
     )
   }
   

   • createContext()라는 함수를 이용해 변수를 만든다. 그러면 해당 변수는 특별한 <컴포넌트>가 된다.

2. context.Provider 범위 세팅

   let 재고context = React.createContext();
   
   function App(){
     let [재고, 재고변경] = useState([10,11,12]);
   
     return (
       <재고context.Provider value={재고}>
         <카드레이아웃/>
       </재고context.Provider>
   
     )
   }
   

   • 특별한 <컴포넌트>로 state 값 공유하려는 컴포넌트들을 <범위></범위>로 감싼다.
   • value={state이름} 로 공유할 state를 적어준다.
   • <범위></범위> 안에 있는 모든 HTML & 컴포넌트는 재고 state를 이용 할 수 있다.

3. state 사용하기 - useContext 훅

   import React, {useState, useContext} from 'react';
   
   function Card(){
     let 재고 = useContext(재고context);
   
     return (
       <HTML많은곳/>
       <div>{재고[0]}</div>
     )
   }
   

   • useContext() 라는 훅을 통해 원하는 context를 불러와야 한다.
   • let 재고 = useContext(재고context); 재고 context 에 들어있는 state를 변수로 저장한다는 뜻이다.
   • useContext 훅을 쓰려면 상단에 'react' 로부터 import 해야 한다.

+) 예외 상황 생각해보기

Q. 컴포넌트가 다른파일에 있다면?

• context 변수를 App.js에서 export하고 Detail.js에서 import 해준다.

  • [App.js]

    export let 재고context = React.createContext();
    
    function App(){
      let [재고, 재고변경] = useState([10,11,12]);
    
      return (
        <재고context.Provider value={재고}>
          <Detail/>
        </재고context.Provider>
      )
    }
    

    • export 키워드는 변수나 함수 선언 왼쪽에 붙일 수 있다.

  • [Detail.js]

    import {재고context} from './App.js';
    
    function Detail(){
      let 재고 = useContext(재고context);
    		return (
      )
    }
    

    • 다른 파일에서 import { 변수명, 함수명 } 형태로 가져와서 사용한다.