ContextAPI는 변경이 잦지 않고 크기가 크지 않은 data를 전역으로 사용하고 싶을 때 사용 효율이 좋은 React 상태관리 API이다.

ContextAPI 사용법

import React from "react";


// 1. ContextAPI를 사용하기 위해서는 먼저 데이터를 저장할 공간 생성 필요
const MyStore = React.createContext();

function App() {
  	// Context의 Value는 App 컴포넌트에서 관리
    const [name, setName] = React.useState();
    return (
        <div className="App">
            {/* 2. 만든Context.Provider에 주입, value: 넣어주고 싶은 data 있으면*/}
            <MyStore.Provider value={{ name: name, setName: setName }}>
                <MyStoreConsumer />
            </MyStore.Provider>
        </div>
    );
}

const MyStoreConsumer = () => {
    // Consumer 대신 useContext 이용해서 data 구독
    const { name, setName } = React.useContext(MyStore);

    return (<div>
        <h1>{name}</h1>
        <button onClickCapture={() => { setName("jjungnie hi") }}>이름 바꾸기</button>
    </div>);
}

export default App;

---

Data 주입 및 구독하기

1. ContextAPI를 사용하기 위해서는 먼저 데이터를 저장할 공간 생성 필요

   const MyStore = React.createContext();

2. Provider로 데이터 주입
   : Provider는 Context를 구독한 컴포넌트들에게 데이터 변했어! 알림,
   여러 컨텍스트가 있다면 중첩해서 사용 가능

3. Consumer 혹은 useContext 으로 data 구독
   : Consumer는 컴포넌트가 context를 구독할 수 있도록 함,
   useContext는 위의 코드 처럼 따로 컴포넌트 생성하여 사용함

<MyStore.Provider value={{ name: name, setName: setName }}>
	{/* 3. 만든 Context.Consumer로 data 구독, value를 받아올 수 있음*/}
    <MyStore.Consumer>
    	{(value) => // 4. 내가 value를 넣고 싶은 컴포넌트 리턴에 작성
        			return (<div>{value.name}</div>);
        }} 
    </MyStore.Consumer>
</MyStore.Provider>

Data 수정하기

• useState() 사용해서 Provider value 값 넣음

const [name, setName] = React.useState();