styled-components의 다양한 기능에 대해 더 알 수 있었던
다크 모드스위치 작업파트.
당시에 급하게 처리하느라 ThemeProvider를 사용했지만,
사용하기 급급해서 제대로 정리가 안된 것 같아서
다시 공부하며 리팩토링하고 정리하기!

다크모드를 구현하는 자세한 방법보단 설정되는 과정에 집중해 정리하였습니다

🌙 Dark-mode Switch

최근 웹이나 앱을 보면 환경에 따라 눈의 피로도를 낮출 수 있도록
다크모드를 지원하는 것을 많이 보았다.
그래서 나도 프로젝트에 마지막에 추가 해보게 되었다.
아무래도 스타일링적으로 조절해야 하는게 많아서 마지막에 하는게 나았던 것 같다 :)

⚙️ 작동구조

여러가지 방법이 있겠지만, 스타일링을 쉽게 하기 위해서
styled-components의 ThemeProvider를 통해 전역으로 스타일링이
변경될 수 있도록 관리하기로 했다.

useThemeMode라는 커스텀훅을 만들어서 localStorage에 값을 저장하여
새로고침을 하더라도 설정한 모드가 유지될 수 있도록 설정했다.

그런 다음,
App.tsx에서 커스텀훅을 불러와서 모드에 관한 값은
ThemeProvider에 전달하고,
모드를 변경시킬 수 있는 함수는 모드스위치 버튼에 전달해서
스타일링이 변경되게 했다.

🕹 custom hook - useThemeMode

테마 모드 설정을 위한 useThemeMode라는 훅을 만들었다.
상태값인 themeMode에 boolean형으로
true일 땐 다크모드, false일 경우엔 라이트모드로 설정되게 했다.

const useThemeMode = () => {
  // 브라우저의 테마정보 확인
  const isBrowserDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme : dark').matches;
  
  // 브라우저의 테마정보를 토대로 초기 상태값 설정
  let initialTheme = isBrowserDarkMode;
  const [themeMode, setThemeMode] = useState<boolean>(initialTheme);
  
  // 사용자 지정 테마가 있는지 확인 후 있으면 해당 테마로 설정, 없다면 브라우저 테마로 설정
  const localSettingTheme = Boolean(localStorage.getItem("themeMode"));
  if(localSettingTheme) {
    initialTheme = localSettingTheme;
  }
  
  const setMode = (mode : boolean) => {
    localStorage.setItem("themeMode", JSON.stringify(mode));
    setThemeMode(mode);
  }
  
  // themeMode 변경 시마다 localStorage에 설정되면서 테마 변경되게 하는 함수 생성
  const switchThemeMode = () => {
    setMode(!themeMode);
  }
  
  return {
    themeMode,
    switchThemeMode
  }
  
  export default useThemeMode;
    

여기서 몇가지 확인해 볼 코드는,
matchMedia() 를 통해 브라우저의 테마모드를 확인하는 것이다.

📍 window.matchMedia()란?
주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환한다.
이번 작업에서 사용한 prefers-color-scheme : dark는 사용자의 시스템이 다크 테마를 사용하는지를 탐지하는 역할을 한다.

이후, Boolean() 함수를 사용해서
사용자가 지정한 테마가 있는지를 확인하는 작업을 거친 후
있다면 해당 테마로, 없다면 브라우저의 기본 테마로 설정하게 했다.

📍 Boolean 함수란?

• 다른 자료형을 boolean형으로 변환할 때 사용하는 함수
  • false : 0, '', null, undefined, NaN
  • true : false를 제외한 경우, 참인 표현식

localStorage에 themeMode를 설정할 때는,
key값과 value값이 모두 string이어야 하는데
나는 themeMode값을 boolean형으로 설정했기 때문에
JSON.stringify로 string화 작업을 거쳐주었다.

ThemeProvider

ThemeProvider란 react의 context API를 사용해서
전역적으로 스타일링을 변경할 수 있도록 styled-components에서
제공하는 전역스타일링 기능이다.

반드시 theme 속성을 갖는 컴포넌트로,
theme 속성의 값으로 설정된 객체를
일일이 넘겨줄 필요 없이 한번에 모든 하위 컴포넌트들의 props로 전달한다.

위에서 작성한 커스텀 훅과 함께 ThemeProvider 를 사용해보자.

...
import { ThemeProvider } from "styled-components";
import { darkTheme, lightTheme } from "./globals/theme";
import useThemeMode from "./hooks/useThemeMode";
import SwitchButton from "./components/SwitchButton";

function App() {
  const {themeMode, switchThemeMode} = useThemeMode();
  
  return (
    <ThemeProvider theme={themeMode ? darkTheme : lightTheme}>
    	<SwitchButton changeTheme={switchThemeMode} isDark={themeMode} />
    </ThemeProvider>
  );
}

export default App;

이렇게 하면 ThemeProvider의 theme을 통해
커스텀 훅에 접근해 themeMode를 감지하며
스위치 버튼이 클릭 될 경우엔 함수가 발동되면서
모드가 변경이 되고,
ThemeProvider가 감싸고 있는 하위 컴포넌트들의 스타일링이
내가 구분해둔 대로 모두 변경된다.

나름 이해한대로 정리했는데 혹시나 틀린 부분이 있다면 댓글로 알려주세요!
즐겁게 다시 공부하겠습니다 🤗

📌 참고하였습니다 :)

• styled-components로 다크모드 만들기
• Boolean()함수를 이용하여 불린으로 변환
• prefer-color-scheme [MDN]