생활코딩: context API

 

1. style.css 작성

.root,
.root div{
    border: 10px solid gray;
    margin: 10px;
    padding: 10px;
}

2. App.js 작성

// Context API: 전역적으로 상태를 공유할 수 있도록 하는 도구

// 리액트에서 컨텍스트를 만들려면 createContext라는 함수를 임포트 해야 한다.
import React, {createContext, useContext} from "react";
import "./style.css";


const themeDefault = {border: '10px solid red'};

// 컨텍스트의 기본값이 themeDefault가 되었다. 
const themeContext = createContext(themeDefault);
// 함수형에서는 useContext라는 함수를 임포트 하고 컴포넌트에서 사용하면 된다.

export default function App(){
  //컴포넌에서 컨텍스트 사용
  const theme = useContext(themeContext);
  console.log('##theme', theme);

  return(
    <themeContext.Provider value={{border:'10px solid blue'}}> {/*<Sub2>의 테두리는 빨간색, 감싸고 있는 <Sub3>의 테두리가 파란색이 된다. 그 하위 컴포넌트들도 다 파란색으로 적용된다.*/}
    <div className="root" style={theme}>
      <h1>Hello World!</h1>
      <Sub1 />
    </div>
    </themeContext.Provider>
  );
}

function Sub1(){
  const theme = useContext(themeContext);

    {/* 컴포넌트마다 반복할 수는 없다. 위처럼 Provider 컴포넌트를 사용해야 한다.*/}
    {/* Provider 컴포넌트는 value값이 반드시 필요하다. */}
  return(
    // <themeContext.Provider value={{border:'10px solid green'}}>
    // <themeContext.Provider value={{border:'10px solid green'}}> {/*<Sub2>의 테두리는 빨간색, 감싸고 있는 <Sub3>의 테두리가 녹색이 된다.*/}
      <div style={theme}>
        <h1>Sub1</h1>
        <Sub2></Sub2>
      </div>
    // </themeContext.Provider>
  );
} 

function Sub2(){
  const theme = useContext(themeContext);
  

  return(
    // <themeContext.Provider value={{border:'10px solid green'}}> {/*<Sub2>의 테두리는 빨간색, 감싸고 있는 <Sub3>의 테두리가 녹색이 된다.*/}
    <div style={theme}>
      <h1>Sub2</h1>
      <Sub3></Sub3>
    </div>
    // </themeContext.Provider>
  )
}

function Sub3(){
  const theme = useContext(themeContext);
  console.log('##theme3', theme);

  return(
    <div style={theme}>
      <h1>Sub3</h1>
    </div>
  )
}

/* 
모든 컴포넌트마다 useContext(themeContext)를 넣어서 사용하면 컨텍스트값이 바뀔 때 전부 바뀐다.
그렇다고 모든 개별 컴포넌트의 스타일을 일일이 지정하는 것도 무리다.
따라서 전체적으로 적용해야 하는 값에는 const theme= useContext(themeContext); 방식을 사용해서 바꿔주되,
달라야 하는 컴포넌트는 <Provider> 컴포넌트를 사용해서 개별 값을 적용해준다. e.g. <themeContext.Provider value

즉 컨텍스트를 이용하면 전역적으로 상태를 공유할 수 있다.
만약 특정 컴포넌트의 설정을 바꾸기를 원한다면 그 상위 컴포넌트에 <Provider>를 적용하여 그 하위 컴포넌트에서 간편하게 값을 공유할 수 있다.
*/