230629 useContext( )

props :  루트돔노드(App.tsx)에서 데이터를 자식 컴포넌트에전달 -> 자신이 후손컴포넌트에 전달

useContext:를 사용하면 데이터를 후손컴포넌트까지에도 다 전달가능.

 

 

데이터를 보내주려고 하는 (전송 컴포넌트에서) Create Context를 선언한다.

(App.tsx)

const ThemeContext = React.createContext("light"); //인자값으로 기본값을 보낼 수 있다.

그리고 해당변수가 객체가 되어 랜더링 부분에서 

데이터를 받을 컴포넌트를 감싼다.*value 값은 기본값이아니라 전달하고자 하는 값이 있다면 value 값을 지정해줄 수 있다.

const App = (props: any) => {
  return (
    <div>
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    </div>
  );
};

 

데이터를 받는 입장의 컴포넌트에서 

역시 선언하고, 랜더링부분에서 데이터를 출력할 부분을 감싼다.

(ThemeButton.tsx)

import React from "react";
const ThemeContext = React.createContext("light");
//받아온 값을 사용 -> consumer
const ThemeButton = (props: any) => {
  return (
    <div>
      <ThemeContext.Consumer>
        {(value) => <div>{value}</div>}
      </ThemeContext.Consumer>
    </div>
  );
};

export default ThemeButton;

---