테마는 앱의 룩앤필을 결정하는 중요한 요소입니다. Redux Toolkit은 효과적인 상태 관리를 위한 JavaScript 라이브러리입니다. 이 패키지를 사용하여 테마 설정을 관리하는 방법을 알아보겠습니다.

Redux Toolkit 설치

Redux Toolkit을 사용하기 위해 먼저 패키지를 설치해야합니다. 아래의 명령을 사용하여 설치할 수 있습니다.

npm install @reduxjs/toolkit

또는

yarn add @reduxjs/toolkit

Redux Store 설정

Redux Toolkit을 이용하여 테마 설정을 관리하기 위해서는 Redux Store를 설정해야 합니다. 아래는 예시로 작성한 Redux Store 설정 코드입니다.

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

const themeSlice = createSlice({
  name: 'theme',
  initialState: 'light',
  reducers: {
    setTheme: (state, action) => {
      return action.payload;
    },
  },
});

export const { setTheme } = themeSlice.actions;

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

export default store;

위의 코드에서는 createSlice 함수를 이용하여 theme이라는 이름의 슬라이스를 생성합니다. 이 슬라이스는 light라는 초기 상태와 setTheme 액션을 포함하고 있습니다.

Redux Store를 설정한 후에는 앱에서 이를 사용할 수 있습니다. Redux Store를 앱과 연결하기 위해 Provider를 사용해야 합니다.

테마 설정 사용

Redux Store를 설정한 후에는 테마 설정을 사용할 수 있습니다. 예를 들어, 컴포넌트에서 테마를 변경하고 싶을 때 setTheme 액션을 디스패치하여 Redux Store의 테마 값을 변경할 수 있습니다.

다음은 예시로 작성한 테마 설정을 사용하는 컴포넌트 코드입니다.

import { useDispatch, useSelector } from 'react-redux';
import { setTheme } from './store';

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

  const handleThemeChange = (newTheme) => {
    dispatch(setTheme(newTheme));
  };

  return (
    <div>
      <button onClick={() => handleThemeChange('light')}>Light</button>
      <button onClick={() => handleThemeChange('dark')}>Dark</button>
      <p>Current Theme: <strong>{theme}</strong></p>
    </div>
  );
};

export default ThemeSelector;

위의 코드에서는 useDispatch와 useSelector 훅을 사용하여 Redux Store의 테마 값을 가져오고 setTheme 액션을 디스패치하는 방법을 보여줍니다. 클릭 이벤트 핸들러를 통해 theme 값을 변경하면 Redux Store의 테마 값이 업데이트되고, 해당 변경사항은 앱에서 반영됩니다.

마무리

Redux Toolkit을 이용하여 JavaScript 앱의 테마 설정을 관리하는 방법에 대해 알아보았습니다. Redux Toolkit은 Redux 상태 관리를 간소화하고 효율적으로 구현하는 데 도움을 주는 강력한 도구입니다. 이를 이용하여 앱의 테마 설정을 간편하게 관리할 수 있습니다.

#redux #redux-toolkit