'Coin Site Project'

[TIL/Coin Site Project] 2023/12/12

✅ 분리 X1\. theme.jstheme.js에 있는 getDesignTokens 함수부터 살펴보자.getDesignTokens는 인자로 mode를 받는다. 함수를 사용하는 부분에서 받은 mode가 light에 해당하면, light 버전의 palette가 반환된다.

2023년 12월 12일2min read

✅ 분리 X

1. theme.js

theme.js에 있는 getDesignTokens 함수부터 살펴보자.

getDesignTokens는 인자로 mode를 받는다.

함수를 사용하는 부분에서 받은 mode가 light에 해당하면, light 버전의 palette가 반환된다. 반면 함수를 사용하는 부분에서 받은 mode가 dark에 해당하면, dark 버전의 palette가 반환된다.

2. App.js

mode의 초기값은 light로 설정되어 있다.

toggleColorMode 함수가 실행되면, setMode를 통해 light는 dark로, dark는 light로 mode의 상태를 토글하게 된다.

17번 라인의 theme 변수에는, mode에 맞는(dark or light) palette가 담긴 theme이 저장된다.

✅ custom hook만 분리해 보자

custom hook은 귀찮아서 만들게 된다는 점이 핵심이다. 반복되는 로직을 별도의 컴포넌트처럼 분리해서 필요할 때마다 가져다 쓰겠다는 것이다.

기존 코드의 11번부터 15번 라인까지의 로직을 useThemeToggle이라는 커스텀 훅으로 분리한 모습이다.

커스텀 훅은 mode, toggleColorMode를 반환한다. 사용하고자 하는 컴포넌트에서는 구조분해할당을 통해 손쉽게 반환값을 적용할 수 있게 된다.

✅ Provider를 분리해 보자

기존 코드의 17번 라인을 분리했다.

토글된 mode를 커스텀 훅으로부터 가져왔고, 해당 mode를 MUIThemeProvider에 props로 전달했다.

MUIThemeProvider가 반환하는 값은 결국 최신화된 theme이 적용된 ThemeProvider가 된다. children이 적용됐기에, MUIThemeProvider로 감싼 부분은 해당 theme의 적용을 받게 된다.

✅ 코드 정리

App.js

code

import React from "react";

import { CssBaseline, Box } from "@mui/material";
import IconButton from "@mui/material/IconButton";
import Brightness4Icon from "@mui/icons-material/Brightness4";
import Brightness7Icon from "@mui/icons-material/Brightness7";

import useThemeToggle from "./useThemeToggle";
import MUIThemeProvider from "./MUIThemeProvider";

const App = () => {
  const { mode, toggleColorMode } = useThemeToggle();

  return (
    <MUIThemeProvider mode={mode}>
      <CssBaseline />
      <Box>
        <IconButton onClick={toggleColorMode}>
          {mode === "light" ? <Brightness4Icon /> : <Brightness7Icon />}
        </IconButton>
      </Box>
      <Box sx={{ height: "100vh" }}>모드</Box>
    </MUIThemeProvider>
  );
};

export default App;

theme.js

code

import { amber, grey, deepOrange, red } from "@mui/material/colors";

export const getDesignTokens = (mode) => ({
  palette: {
    mode,
    ...(mode === "light"
      ? {
          // light mode
          primary: amber,
          divider: red,
          text: {
            primary: grey[900],
            secondary: grey[800],
          },
        }
      : {
          // dark mode
          primary: deepOrange,
          divider: red,
          background: {
            default: deepOrange[900],
            paper: deepOrange[900],
          },
          text: {
            primary: "#fff",
            secondary: grey[500],
          },
        }),
  },
});

useThemeToggle.js

code

import { useState, useCallback } from "react";

const useThemeToggle = () => {
  const [mode, setMode] = useState("light");

  const toggleColorMode = useCallback(() => {
    setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
  }, []);

  return { mode, toggleColorMode };
};

export default useThemeToggle;

MUIThemeProvider.js

code

import React, { useMemo } from "react";
import { createTheme, ThemeProvider } from "@mui/material";
import { getDesignTokens } from "./theme";

const MUIThemeProvider = ({ mode, children }) => {
  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default MUIThemeProvider;

✅ 구현된 모습