Component가 많을 때 props 대신 Context API 쓰기

• props 전송 없이도 하위 컴포넌트들 끼리 state 값 공유 가능
• props를 쓰기 불편한 경우에 도움 (중첩된 컴포넌트가 많을 경우)

props로 전송 : 컴포넌트의 재고 state → 에 데이터 바인딩

Context API로 state 공유

하위 컴포넌트들이 props 대신 state를 사용가능하게 만들어주는 Context문법

Context 만들기

1. React.createContext()로 범위 생성

→ 같은 변수 값을 공유할 범위 생성

let stockContext = React.createContext();

2. state 값을 공유할 HTML을 범위로 감싸기

→ value = {공유할 데이터}
→ <범위></범위> 안에 있는 모든 HTML과 컴포넌트는 stock state를 사용 가능

  function App(){
  	let [stock, changeStock] = useState([10,11,12]);
  	return (
  		HTML...
  		<stockContext.Provider value={stock}>
    		<Card....>
  		</stockContext.Provider>
    )
  }

3. useContext()로 공유된 값 사용

• useContext라는 훅을 사용하기 위해서는 상단에 선언

import React, {useState, useContext} from 'react';

• props 전송 없이도 재고라는 state 사용가능

function Card(){
    let stock = useContext(stockContext);
    return (
        <HTML...>
        <div>{stock}<div>
    )
}

Card 컴포넌트 안에 하위 컴포넌트 생성

function Card(){
    let stock = useContext(stockContext);
    return (
        <HTML...>
        <Test/>
    )
}
          
function Test(){
    let stock = useContext(stockContext);
    return <p>{ stock }</p>
}

컴포넌트가 다른파일에 존재한다면?

• export 키워드를 변수나 함수선언 왼쪽에 삽입하면, 다른 파일에서 import {변수, 함수} 가져와서 사용

(App.js) export 추가
export let stockContext = React.createContext();
          
(Detail.js) import 추가
import { stockContext } from './App.js';
  function Detail(){
    let stock = useContext(stockContext);
    return (
        ...
        <stockContext.Provider value={stock}>
          <Card....>
        </stockContext.Provider>
        ...
    )
}