컨텍스트를 사용하여 테마변경 기능 만들기

ThemeContext.jsx

import React from "react";

const ThemeContext = React.createContext();

ThemeContext.displayName = "ThemeContext";

export default ThemeContext;

 

MainContent.jsx

import { useContext } from "react";

import ThemeContext from "./ThemeContext";

function MainContent(props){

  const { theme, toggleTheme } = useContext(ThemeContext);

  return (

    <div

      style={{

        width: "200vw", // 수정: 오타 수정

        height: "100vh",

        padding: "1.5rem",

        backgroundColor: theme === "light" ? "white" : "black", // 수정: 비교 연산자 수정

        color: theme === "light" ? "black" : "white", // 수정: 비교 연산자 수정

      }}

    >

      <p>안녕하세요, 테마 변경이 가능한 웹사이트 입니다.</p>

      <button onClick={toggleTheme}>테마 변경</button>

    </div>

  );

}

export default MainContent;

 

DarkOrLight.jsx

import { useState, useCallback } from "react";

import ThemeContext from "./ThemeContext";

import MainContent from "./MainContent";

function DarkOrLight(props) {

  const [theme, setTheme] = useState("light");

  const toggleTheme = useCallback(() => {

    if (theme === "light") {

      // 수정: 비교 연산자 수정 및 문자열 따옴표 추가

      setTheme("dark");

    } else if (theme === "dark") {

      // 수정: 비교 연산자 수정 및 문자열 따옴표 추가

      setTheme("light");

    }

  }, [theme]);

  return (

    <ThemeContext.Provider value={{ theme, toggleTheme }}>

      <MainContent />

    </ThemeContext.Provider>

  )

}

export default DarkOrLight;

 

index.js

import DarkOrLight from "./chapter_14/DarkOrLight";

//14

ReactDOM.render(

  <React.StrictMode>

    <DarkOrLight />

  </React.StrictMode>,

  document.getElementById("root")

);