Context API - 사용법

props 연속으로 사용하는게 싫다면, Redux나 Context API를 활용하면 된다.
그럼 props 전송 없이도 하위 컴포넌트들 끼리 state 값들을 똑같이 공유할 수 있다.

import, export

export 키워드는 변수나 함수 선언 왼쪽에 붙일 수 있습니다.
그럼 다른 파일에서 import { 변수명, 함수명 } from '경로'; 이렇게 가져와서 쓸 수 있습니다.

Context API

1. context만들기

let 작명 = React.createContext();

React.createContext()의 역활은 같은 변수 값을 공유할 범위를 생성한다.

2. 같은 값을 공유할 HTML을 범위로 감싸주기

<재고context.Provider>
      <A />
    </재고context.Provider>

3. value={공유하고 싶은 데이터}
   (value는 작명하는 부분이 아니라 고정값임)

<재고context.Provider value={ 재고 }>
      <A />
    </재고context.Provider>

4. 값을 활용할 컴포넌트에서 useContext(범위명)로 공유된 값 사용하기
   import { useContext } from 'react';
let 작명 = useContext(범위명);

App.js

import './App.css';
import React from 'react';
import { useState } from 'react';
import A from './A';

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


function App() {

  const [재고, 재고변경] = useState([10, 11, 12]);

  return (
    <재고context.Provider value={ 재고 } >
      <A />
    </재고context.Provider>
  );
}

export default App;

A.js

import { useContext } from 'react';
import React from 'react';
import { 재고context } from './App';

function A () {

  let 재고 = useContext(재고context);

  return (
    <div>
      <ul>
        {
          재고.map((el)=>{
            return(
              <li>{el}</li>
            )
          })
        }
      </ul>
    </div>
  );
}

export default A;