Redux Toolkit을 활용한 자바스크립트 앱의 사용자 지정 테마

21 Sep 2023

redux

Redux Toolkit은 JavaScript 앱에서 상태 관리를 용이하게 해주는 강력한 라이브러리입니다. 이를 통해 앱의 전역 상태를 효과적으로 관리하고, 코드의 반복을 줄이며, 앱의 유지 및 보수를 용이하게 할 수 있습니다.

이번 포스트에서는 Redux Toolkit을 사용하여 자바스크립트 앱의 사용자 지정 테마를 구현하는 방법에 대해 알아보겠습니다.

1. 테마 상태 정의하기

Redux Toolkit에서는 createSlice 함수를 사용하여 테마 상태를 정의할 수 있습니다. 테마 상태는 앱 전역에서 사용되며, 사용자 지정 테마 정보를 포함합니다.

import { createSlice } from '@reduxjs/toolkit';

const themeSlice = createSlice({
  name: 'theme',
  initialState: {
    darkMode: false,
    primaryColor: '#007bff',
    secondaryColor: '#6c757d',
  },
  reducers: {
    toggleDarkMode: (state) => {
      state.darkMode = !state.darkMode;
    },
    setPrimaryColor: (state, action) => {
      state.primaryColor = action.payload;
    },
    setSecondaryColor: (state, action) => {
      state.secondaryColor = action.payload;
    },
  },
});

export const { toggleDarkMode, setPrimaryColor, setSecondaryColor } = themeSlice.actions;

export default themeSlice.reducer;

위의 코드에서는 createSlice 함수를 사용하여 theme slice를 생성하고, 초기 상태를 정의합니다. toggleDarkMode, setPrimaryColor, setSecondaryColor는 액션 생성자 함수로서 Redux Toolkit에서 자동으로 생성됩니다. 이 액션 생성자 함수들은 theme slice의 상태를 업데이트하는 데 사용됩니다.

2. 테마 상태 사용하기

Redux Toolkit에서는 createStore 함수를 사용하여 스토어를 생성할 수 있습니다. 테마 상태를 스토어에 등록하여 앱 전역에서 사용할 수 있도록 합니다.

import { configureStore } from '@reduxjs/toolkit';
import themeReducer from './themeSlice';

const store = configureStore({
  reducer: {
    theme: themeReducer,
  },
});

export default store;

위의 코드에서 themeReducer를 theme 스토어의 리듀서로 등록하여 테마 상태를 사용할 수 있도록 합니다.

3. 테마 설정하기

Redux Toolkit의 스토어를 사용하여 테마 상태를 설정하고 업데이트하는 방법은 다음과 같습니다.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { toggleDarkMode, setPrimaryColor, setSecondaryColor } from './themeSlice';

function ThemeSettings() {
  const theme = useSelector((state) => state.theme);
  const dispatch = useDispatch();

  const handleToggleDarkMode = () => {
    dispatch(toggleDarkMode());
  };

  const handlePrimaryColorChange = (event) => {
    dispatch(setPrimaryColor(event.target.value));
  };

  const handleSecondaryColorChange = (event) => {
    dispatch(setSecondaryColor(event.target.value));
  };

  return (
    <div>
      <h1>Theme Settings</h1>
      
      <label>
        <input type="checkbox" checked={theme.darkMode} onChange={handleToggleDarkMode} />
        Dark Mode
      </label>
      
      <label>
        Primary Color:
        <input type="color" value={theme.primaryColor} onChange={handlePrimaryColorChange} />
      </label>
      
      <label>
        Secondary Color:
        <input type="color" value={theme.secondaryColor} onChange={handleSecondaryColorChange} />
      </label>
    </div>
  );
}

export default ThemeSettings;

위의 코드에서 useSelector hook을 사용하여 theme 스토어의 상태를 가져와 컴포넌트에서 사용할 수 있도록 합니다. useDispatch hook을 사용하여 액션 생성자 함수를 디스패치하여 테마 상태를 업데이트합니다. 이렇게 하면 사용자는 테마 옵션을 변경할 수 있으며, 변경된 옵션은 Redux 스토어에서 관리됩니다.

마무리

이렇게 Redux Toolkit을 활용하여 JavaScript 앱의 사용자 지정 테마를 구현하는 방법을 알아보았습니다. Redux Toolkit은 Redux의 기능을 보다 쉽고 간결하게 사용할 수 있도록 도와줍니다. 테마 상태와 액션은 쉽게 정의하고 사용할 수 있으며, 앱 전역에서 일관된 디자인을 유지하는 데 도움이 됩니다. #ReduxToolkit #사용자지정테마