[TIL/Coin Site Project] 2023/11/30

Dark Mode 습작 🌖

import React, { createContext, useContext, useMemo, useState } from "react";
import IconButton from "@mui/material/IconButton";
import Box from "@mui/material/Box";
import { useTheme, ThemeProvider, createTheme } from "@mui/material/styles";
import Brightness4Icon from "@mui/icons-material/Brightness4";
import Brightness7Icon from "@mui/icons-material/Brightness7";

const ColorModeContext = createContext({ toggleColorMode: () => {} });

function MyApp() {
  console.log("MyApp component rendering");
  const theme = useTheme();
  const colorMode = useContext(ColorModeContext);

  return (
    <Box
      sx={{
        display: "flex",
        width: "100%",
        height: "100vh",
        alignItems: "center",
        justifyContent: "center",
        bgcolor: "background.default",
        color: "text.primary",
        borderRadius: 1,
        p: 3,
      }}
    >
      {theme.palette.mode} mode
      <IconButton
        sx={{ ml: 1 }}
        onClick={colorMode.toggleColorMode}
        color="inherit"
      >
        {theme.palette.mode === "dark" ? (
          <Brightness7Icon />
        ) : (
          <Brightness4Icon />
        )}
      </IconButton>
    </Box>
  );
}

const ToggleColorMode = () => {
  console.log("ToggleColorMode component rendering");
  const [mode, setMode] = useState("light");

  const colorMode = useMemo(
    () => ({
      toggleColorMode: () => {
        console.log("toggleColorMode executed");
        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
      },
    }),
    []
  );
  console.log("theme executed 1");
  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode,
        },
      }),
    [mode]
  );
  console.log("theme executed 2");
  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <MyApp />
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
};

export default ToggleColorMode;

// what is createContext?
// 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법?
// ColorModeContext라는 컴포넌트 내부에서는 toggleColorMode를 전역적으로 사용할 수 있다는 의미의 코드?

// what is useTheme?
// 아래 코드에서 theme은, mui에서 다양한 theme을 규정해놓은 하나의 훅이다.

// what is useContext?
// useContext는 함수형 컴포넌트 내에서 컨텍스트의 현재 값을 반환한다. 이를 통해 해당 컨텍스트의 값을 읽을 수 있다.

// what is useMemo?
// 컴포넌트 성능 최적화에 사용되는 react hook
// 렌더링 => 컴포넌트 함수 호출 => memoize된 함수 재사용(동일한 계산 반복할 때 사용)

// what is ThemeProvider?
// 전역으로 테마를 적용될 때 사용되는 컴포넌트

// what is createTheme?
// 테마 객체를 생성하는 데 사용되는 함수

새로고침 console 순서

1. ToggleColorMode component rendering
2. theme executed 1
3. theme executed 2
4. MyApp component rendering

모드 아이콘 클릭 console 순서

1. toggleColorMode executed
2. ToggleColorMode component rendering
3. theme executed 1
4. theme executed 2
5. MyApp component rendering

+) toggleColorMode executed 이후 setState()에 의해 re-rendering이 된다는 점이 '아이콘 클릭 console'에서 주목할 사항이다.

+) createContext, useContext, useMemo => 리액트 공식문서를 통해 정리해야 될 필요성을 느꼈다.

+) 본 프로젝트에는 어떻게 적용할 것인지에 대해 고민할 필요성을 느꼈다.

구현 🌖