[ Vite + React ] MobX 활용 DarkMode 상태관리

다크모드와 화이트모드 토글을 만들면서 현재의 모드가 어떤 모드인지 상태관리가 필요하여 MobX를 사용

---

MobX

mobX와 mobx-react를 설치

npm install mobx mobx-react

 

isDarkMode = false로 초기값을 세팅

이후 constructor를 만들어 makeAutoObservable(this)를 통해 isDarkMode값이 바뀌면 이를 감지하여 자동으로 해당 페이지를 재렌더링

 

toggleTheme 함수를 만들어 모드 변경 토글 버튼을 누르면 해당 함수가 실행되도록 처리

 

마지막으로 themeStore 객체를 만들어준 후 export

import { makeAutoObservable } from "mobx"

class ThemeStore {
    isDarkMode = false

    constructor() {
        makeAutoObservable(this);
    }

    toggleTheme = () => {
        this.isDarkMode = !this.isDarkMode; // 다크 모드 상태 토글
    }
}

const themeStore = new ThemeStore();
export default themeStore;

---

Useage

사용은 해당 컴포넌트를 observer로 감싸준다. 

이러면 위에서 생성했던 makeAutoObservable이 변경을 감지하고 observer로 감싸져있는 컴포넌트를 재렌더링시켜준다.

 

이후 export한 themeStore를 import를 하여 

설정한 isDarkMode의 값과 설정한 함수를 가져올 수 있다.

 

이를 활용하여 단순히 mobX를 통해 isDarkMode의 true, false값을 가져와 사용이 가능하다.

import themeStore from "../../store/ThemeStore.ts";
import {observer} from "mobx-react";

const componet = observer(() => {
    /* DARK MODE SWITCH RELACTION */
    const {isDarkMode,toggleTheme} = themeStore
    ....
    return (
                <ToggleComponent>
                    <div onClick={toggleTheme}  className={`toggle_button_switch ${isDarkMode ? 'active' : ''}`}>
                    <div className={`toggle_button ${isDarkMode ? 'active' : ''}`}>
                        {icon}
                    </div>
                        <div className={`toggle_button_name ${isDarkMode ? 'active' : ''}`}>
                            {isDarkMode ? 'NIGHTMODE' : 'DAYMODE'}
                        </div>
                    </div>
                </ToggleComponent>
    )
    });
   
 export default component

 

이후 toggle에서 했던 것처럼 페이지 전체를 감싸고 있는 css로 div의 background의 색을 바꿔준다.

.default_container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  &.isDarkMode {
    background-color: #333333;
    color: #ffffff;
  }

 

이러면 토글 버튼을 누를 때마다 다크모드와 화이트모드가 바뀌면서 배경색도 바뀐다.