다크모드 구현 하기 (react, reduxToolkit, styled components)

📍 시작

예전부터 다크 모드를 구현하고 싶었다.
이번 기회에 공부할 수 있었던 계기가 되었다.

여러 가지 방법이 있었지만 body에 테마 스타일을 지정하고
<ThemeProvider>와 theme속성을 활용하는 대중적인 방법을 선택하게 되었다.

토글 버튼 클릭 시 테마가 변경되고
새로고침 해도 유지되어야 하기에 localStorage도 같이 활용했다.

---

🥹 문제

전역으로 상태를 관리할까 했지만
localStorage에 저장하기에 할 필요가 없다 생각했다.

const themeMode = localStorage.getItem('THEME');

const handlerTheme = () => {
  if (themeMode === 'dark') {
    localStorage.setItem('THEME', 'light');
  } else {
    localStorage.setItem('THEME', 'dark');
  }
};

function MyApp() {
  const themeMode = locaStorage.getItem('THEME');
  return (
    <ThemeProvider theme={themeMode === 'dark' ? dark : light}>
      <GlobalStyle />
      <App />
    </ThemeProvider>
  );
}

우선은 hook 등을 바로 사용하지 않고 다이렉트로 코드를 작성해 보았다.
관리자 모드로 localStorage를 확인하면 토글 기능은 잘 작동했다.

하지만 테마 스타일이 변경되지 않는 문제가 발생했다.
(역시 세상은 호락호락하지 않다..🥹)

내가 생각했을 때의 문제는
localStorage의 값을 감지하고 리렌더링해야 하는데 그러지 못하는 것 같다.

또한 Redux Toolkit라이브러리 사용해 상태를 관리하고 있어
Redux Toolkit으로 상태를 관리하고 localStorage를 업데이트하기로 했다.

✨ 구현

그러다 해당 게시물을 참고하게 되었다.

참고 : https://velog.io/@velopert/velog-dark-mode

참고 게시물에서는 브라우저 시스템 세팅도 고려하신 모양이다.
이부분은 이후 리팩토링 단계에서 시도해 보기로 했다.
추후 다시 정독하고 코드를 리팩터링 해봐야겠다.

0. style 설정

//styles/theme.ts
export const light = {
  colors: {
    bgColor: '#fff',
    boxColor: '#fff',
    textColor: '#000',
    iconColor: '#414443',
    iconBoxColor: '#f1f1f1',
  },
};

export const dark = {
  colors: {
    bgColor: '#222',
    boxColor: '#444',
    textColor: '#FDFDFD',
    iconColor: '#FDFDFD',
    iconBoxColor: '#444',
  },
};

light, dark 둘 다 키 값 이름이 동일해야 한다.

// styles/GlobalStyles
:root {
    --bg-color: ${(props) => props.theme.colors.bgColor};
    --box-color: ${(props) => props.theme.colors.boxColor};
    --text-color: ${(props) => props.theme.colors.textColor};
    --icon-color: ${(props) => props.theme.colors.iconColor};
    --icon-box-color: ${(props) => props.theme.colors.iconBoxColor};
  }
.
.
.
body{ 
  background-color: var(--bg-color);
}

css 형식으로 사용하기 편하게 했다.
이제 styled components에 사용할 때 css방식처럼 작성해 주면 된다.

const TextColor = css`
  color: var(--text-color);
`;

1. slice 세팅

// slice.ts
import { createSlice } from '@reduxjs/toolkit';

type initialStateT = {
  themeMode: string;
};
const toggleThemeMode = localStorage.getItem('THEME');

const initialState: initialStateT = {
  themeMode: toggleThemeMode ? toggleThemeMode : 'light',
};

const themeSlice = createSlice({
  name: 'themetype',
  initialState,
  reducers: {
    toggleDarkMode(state) {
      state.themeMode = 'dark';
    },
    toggleLightMode(state) {
      state.themeMode = 'light';
    },
  },
});

export const themeReducer = themeSlice.reducer;
export const themeActions = themeSlice.actions;

다크모드, 라이트모드를 전역에서 관리할 수 있도록 했다.

const initialState: initialStateT = {
  themeMode: toggleThemeMode ? toggleThemeMode : 'light',
};

또한 themeMode는 localStorage에 값이 있을 경우에만 할당되고 없을 경우엔 기본적으로 light 테마를 제공하도록 했다.

2. 토글 버튼 작업

const Nav = () => {
  const dispatch = useDispatch();
  const themeMode = useSelector((state: RootState) => state.themeType.themeMode);

  const themeSave = (value: 'light' | 'dark') => {
    localStorage.setItem('THEME', value);
  };

  const handlerTheme = () => {
    if (!themeMode) return;
    if (themeMode === 'dark') {
      dispatch(themeActions.toggleLightMode());
      themeSave('light');
    } else {
      dispatch(themeActions.toggleDarkMode());
      themeSave('dark');
    }
  };

  return (
    <NavContainer>
      <MenuList>
        <li>
          <SearchBtn />
        </li>
        <li>
          <ThemeBtn handlerTheme={handlerTheme} />
        </li>
      </MenuList>
    </NavContainer>
  );
};

처음에는 ThemeBtn컴포넌트 내부에 작성할까 했지만
재사용성을 고려했고 관리하기 쉽도록 Nav 컴포넌트에 작성했다.
(추후 커스텀 훅으로 작업할 예정이다.)

handlerTheme 함수에서 themeMode의 값이 'dark' 또는 'light'인지 조건문을 작성해
값을 할당했고,
themeSave 함수에 인자로 전달해 localStorage의 값도 변경했다.

3. ThemeProvider 테마 연결하기

function MyApp() {
  const themeMode = useSelector((state: RootState) => state.themeType.themeMode);
  return (
    <ThemeProvider theme={themeMode === 'dark' ? dark : light}>
      <GlobalStyle />
      <App />
    </ThemeProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <MyApp />
      </Provider>
    </QueryClientProvider>
  </React.StrictMode>,
);

전역에 ThemeProvider를 감싸주고 theme속성을 추가해 준다.
useSelector를 사용해 상태 값을 가져온다.

완성!

버튼 클릭 시 localStorage에 값이 저장되고 값에 따라 테마가 변경된다.
localStorage에 저장되기에 새 로고침해도 값이 유지된다.
이제 커스텀 훅으로 만들어 재사용성을 높여 보자!

🌱 번외

커스텀 훅으로 만들기

// hooks/useToggleTheme.ts
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../store';
import { themeActions } from '../store/theme-slice';

const useToggleTheme = () => {
  const dispatch = useDispatch();
  const themeMode = useSelector((state: RootState) => state.themeType.themeMode);

  const themeSave = (value: 'light' | 'dark') => {
    localStorage.setItem('THEME', value);
  };

  const handlerTheme = () => {
    if (!themeMode) return;
    if (themeMode === 'dark') {
      dispatch(themeActions.toggleLightMode());
      themeSave('light');
    } else {
      dispatch(themeActions.toggleDarkMode());
      themeSave('dark');
    }
  };

  return handlerTheme;
};

export default useToggleTheme;

커스텀 훅을 만들 때 React에서 제공하는 다른 훅들처럼
이름 앞에 use를 붙여 줘야 한다.

커스텀 훅을 만들고 handlerTheme함수를 반환해 준다.
반환할 값이 여러 개 라면 배열 형식 [...,...,...]으로 반환하면 된다.

const Nav = () => {
  const handlerTheme = useToggleTheme();
  return (
    <NavContainer>
      <MenuList>
        <li>
          <SearchBtn />
        </li>
        <li>
          <ThemeBtn handlerTheme={handlerTheme} />
        </li>
      </MenuList>
    </NavContainer>
  );
};

이전의 코드를 지우고 const handlerTheme = useToggleTheme();만 작성해 코드가 깔끔해졌다.

---

✏️ 마치며

사실 아직 미흡한 부분이 많다.
공부하는 차원에 진행해 봤는데 하나하나 구현해 보는 쾌감이 들었다 ㅎㅎ
사용자 개인이 세팅한 테마 설정 등은 작업을 안 해서 추후 로직 수정이 필요하지만
구현했다는 점에 의미를 두려고 한다.

해당 토이 프로젝트가 마무리되면 리팩토링 차원에서 진행해 보려고 한다.

여러 방법이 존재하고 내가 참고한 게시물도 css를 이용해 진행하셨다.

---

원래는 벨로그에 블로그를 작성했지만...
간혹 자동으로 비공개 처리되는 문제가 있다..ㅠ
우선 티스토리에 업로드도 같이 하려고 한다.