Context Api 기초

 

전체코드

import React, {createContext, useContext} from "react";
import './App.css';


const themeDefault = {border: '10px solid green'}
const themeContext = createContext(themeDefault)

export default function App(){
    const theme = useContext(themeContext)
    console.log("theme: ", theme)
    return(
        <themeContext.Provider value={theme}>
        <div className="root" style={{border: '10px solid purple'}}>
            <h1>Hello World!</h1>
            <Sub1></Sub1>
        </div>
        </themeContext.Provider>
    )
}

function Sub1(){
    const theme = useContext(themeContext)
    return(
        <themeContext.Provider value={{border: '10px solid red'}}>
        <div style={theme}>
            <h2>Sub1</h2>
            <Sub2></Sub2>
        </div>
        </themeContext.Provider>
    )
}

function Sub2() {
    const theme = useContext(themeContext);
    return (
      <div style={theme}>
        <h3>Sub2</h3>
        <Sub3></Sub3>
      </div>
    );
  }
  
  function Sub3() {
    const theme = useContext(themeContext);
    return (
      <div style={{border: '10px solid blue'}}>
        <h3>Sub3</h3>
      </div>
    );
  }

 

 

1. Context Api(createContext)
- 애플리케이션에서 전역적으로 디자인을 공유하는 테마 기능 구현
import React, {createContext} from "react";
const themeContext = createContext(themeDefault)
--> themeDefault가 새로 생성한 컨텍스트의 기본값이 됨

================================================================

2. 기본값 읽어오기(useContext)
import React, {createContext, useContext} from "react";
export default function App(){
    const theme = useContext(themeContext)
    출력 시:    theme = Object{border: "10px solid green}
    하나에만 사용:    <div className="root" style={theme}>

================================================================

3. 테마 전체 적용
function Sub1(){
    const theme = useContext(themeContext)
    return(
        <themeContext.Provider value={{border: '10px solid green'}}>
        <div style={theme}>
            <h2>Sub1</h2>
            <Sub2></Sub2>
        </div>
        </themeContext.Provider>
    )
}

function Sub2() {
    const theme = useContext(themeContext);
      <div style={theme}>
  
  function Sub3() {
    const theme = useContext(themeContext);
      <div style={theme}>

    1. <themeContext.Provider>를 return 최상단에 배치(전체를 감싸는 형태)
    2. <themeContext.Provider>에 value 속성 부여
    3. 하위 컴포넌트 각각 useContext와 style 부여

================================================================

4. 테마 적용 순서
    1. 스타일 속성으로 직접 부여
    <div className="root" style={{border: '10px solid purple'}}>
    <div style={{border: '10px solid blue'}}>
    2. 하위 컴포넌트의 경우, 상위 컴포넌트의 themeContext.Provider에서 부여한 value
     <themeContext.Provider value={{border: '10px solid red'}}>
     3. 하위 컴포넌트의 경우, 최상위 컴포넌트의 themeContext.Provider에서 부여한 value
     <themeContext.Provider value={theme}>