ContextAPI()

1) React.createContext(): 데이터를 저장할 공간 만들기

const MyStore = React.createContext();

2) 데이터를 가져다 쓰는 방법

- Context.Provider

데이터를 주입하기

Provider는 Context를 구독한 컴포넌트들에게 데이터가 변했다고 알려준다.

여러 컨텍스트가 있다면 중첩해서 사용해도 된다.

<MyStore.Provider value={state}>
  <Component1 />
  <Component2 />
</MyStore.Provider>

- Context.Consumer

주입한 데이터를 구독하기

Consumer는 컴포넌트가 context를 구독하게 해준다.

function App() {
  // Context의 Value는 App 컴포넌트에서 관리
  const [name, setName] = useState("유정");
  return (
    <MyStore.Provider value={{ name, setName }}>
      <MyStore.Consumer>
		    {(value) => {return <div>{value.name}</div>}}
		  </MyStore.Consumer>
    </MyStore.Provider>
  );
}

Consumer는 위처럼 사용하지만 useContext()를 쓰면 굳이 쓰지 않아도 된다.

// MyStore.Provider를 찾는데 성공할 컴포넌트
const SomeComponentInProvider = () => {
  const { name, setName } = useContext(MyStore);
  return (
    <div>
      {name}
      <button onClick={() => setData("perl")}>바꾸기</button>
    </div>
  );
}

3) 데이터 수정하기

context를 만들 때 값과 함수를 만든 이유는 값은 가져다 쓰기 위함이고 함수는 값을 고쳐쓰기 위함이다.

import React, { useState, useContext } from "react";
// Context를 만들기
const MyStore = React.createContext();


const MyStoreConsumer = () => {
  const { name, setName } = useContext(MyStore);
  return (
    <div>
      {name}
      <button onClick={() => setName("perl")}>바꾸기</button>
    </div>
  );
};

function App() {
  // Context의 Value는 App 컴포넌트에서 관리
  const [name, setName] = useState("유정");
  return (
    <MyStore.Provider value={{ name, setName }}>
      <MyStoreConsumer />
    </MyStore.Provider>
  );
}

export default App;