Context API

Context API

Context API를 사용하면 전역적으로 상태를 공유할 수 있고, 원하는 곳에 상태를 바꿔 하위의 값들을 간편하게 공유할 수 있다.

export default function App() {
  return (
    <div className="root">
      <h1>Hello React</h1>
      <Sub1 />
    </div>
  );
}
function Sub1() {
  return (
      <div style={theme}>
        <h1>Sub1</h1>
        <Sub2 />
      </div>
  );
}
function Sub2() {
  return (
    <div>
      <h1>Sub2</h1>
      <Sub3 />
    </div>
  );
}
function Sub3() {
  return (
    <div>
      <h1>Sub3</h1>
    </div>
  );
}

• 각각의 컴포넌트를 만든다.
• theme기능을 구현하기 위해 디자인코드 const themeDefault = {border:'10px solid red'}
• context API를 이용해 themeDefault의 값을 전체의 컴포넌트에 적용한다.

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

• creatContext라는 함수를 import해야한다.
• const themeContext = createContext(themeDefault); themeDefault값을 themeContext에 전달하게 되면 themeDefault가 내가 생성한 context의 기본값이 된다.

기본값을 읽어오려면?

함수형에서 useContext라는 함수를 import해서 이것을 컴포넌트 안에서 로딩하면 된다.

ex) 

const theme = useContext(themeContext);
console.log('theme',theme);

이렇게 전달한다면?

• createContext할 때 만든 기본값이 useContext의 return값이 된다.
• 이 기본값을 각 태그에 적용시긴다.

export default function App() {
  return (
    <div className="root" style={theme}>
      <h1>Hello React</h1>
      <Sub1 />
    </div>
  );
}

(+추가)