react createContext, useContext,

context 생성: import { createContext } from "react"

import { createContext } from "react";

// 기본값으로는 null을 넣어준다.
export const ThemeContext = createContext(null);

context 연결 <ThemeContext.Provider value={{ isDark, setIsDark }}>

import { useState } from "react";
import "./App.css";
import Page from "./Compopnents/Page";
import { ThemeContext } from "./context/ThemeContext";

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    // 📌
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <Page />
    </ThemeContext.Provider>
  );
}
export default App;

 

context 사용 & 변경

• import { useContext } from "react"
• const { isDark, setIsDark } = useContext(ThemeContext);이때 setIsDark 콜하면 전체화면 refresh됨

import { useContext } from "react";
 // 📌 
import { ThemeContext } from "../context/ThemeContext";

const Header = () => {
  // 📌 
  const { isDark, setIsDark } = useContext(ThemeContext);////////////////////////
  return (
    <header
      className="header"
      style={{
        backgroundColor: isDark ? "black" : "lightgray",
        color: isDark ? "white" : "black",
      }}
    >
      <h1>Welcome 홍길동!</h1>
    </header>
  );
};

export default Header;

 

context를 가장 상위에서 불러와서 쓰기 때문에 전체 화면 refresh되는 것인지?

context를 state전용, dispatch전용으로 나누어써야 불필요한 렌더링 막을수 있다고 하는 예제https://velog.io/@shin6403/React-ContextAPI-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%8D%A8%EB%B3%B4%EC%9E%90

[React] ContextAPI 이렇게 써보자

useReducer, useCallback, memo등을 같이 사용하고 있음