다크모드 코드 개선

1. 불필요한 enum type 제거

다크모드를 판별하기 위해 'light'와 'dark' 문자열을 사용하고 있었다. 그래서 이전에는

enum ThemeMode {
  LIGHT = 'light',
  DARK = 'dark',
}

위와 같은 형식으로 지정을 해줬었다.

 if (themeMode === ThemeMode.LIGHT) {
      window.localStorage.setItem(LS_KEY, ThemeMode.DARK);
      setThemeMode(ThemeMode.DARK);
    } else {
      window.localStorage.setItem(LS_KEY, ThemeMode.LIGHT);
      setThemeMode(ThemeMode.LIGHT);
    }

이런 식으로 코드가 사용되었는데 enum을 사용하지 않고 상수로 선언해서 사용 하는 것이 개인적으로 더 직관 적이고 사용하기 편하다고 생각이 들어서 상수로 선언해서 사용하는 부분으로 변경했다.

그리고 이전에는 useDarkMode라는 커스텀 훅에서 타입을 지정하고 사용했다면 ThemeProvider라는 실질적인 다크모드 로직을 갖고 있는 부분에 코드를 추가했다.

import { lightTheme, darkTheme } from '../../styles/theme';
import { createContext, useEffect, useState } from 'react';
import { ThemeProvider as StyledProvider } from 'styled-components';

export const LIGHT = 'light';
export const DARK = 'dark';
export const LS_KEY = 'theme';
export interface Theme {
  themeMode: string;
  setThemeMode: React.Dispatch<React.SetStateAction<string>>;
}

export const ThemeContext = createContext<Theme | null>(null);

const getThemeByLocalStorage = () => localStorage.getItem(LS_KEY) || LIGHT;

const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const [themeMode, setThemeMode] = useState(LIGHT);
  const themeObject = themeMode === LIGHT ? lightTheme : darkTheme;

  useEffect(() => {
    const theme = getThemeByLocalStorage();
    setThemeMode(theme);
  }, []);

  return (
    <ThemeContext.Provider value={{ themeMode, setThemeMode }}>
      <StyledProvider theme={themeObject}>{children}</StyledProvider>
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

1. 불필요한 useEffect 제거

다크모드를 유지하기 위해 처음 렌더링 될 때 로컬 스토리지를 확인하고 다크모드인지 라이트 모드인지 적용하는 부분의 코드가 ThemeProvider랑 useDarkMode 훅에 같은 기능을 하는 로직의 코드가 담겨있었다. 이 부분도 실질적으로 다크모드를 관리하는 ThemeProvider 컴포넌트에서 관리하도록 하고 커스텀 훅에서는 해당 useEffect 코드를 제거 했다.