Redux Thunk를 활용한 애플리케이션 테마 변경 방법

18 Oct 2023

redux

개요

애플리케이션의 테마를 변경할 수 있는 기능은 사용자 경험을 향상시키고 사용자에게 맞춤화된 환경을 제공하는 데 도움이 됩니다. 이번 블로그 포스트에서는 Redux Thunk를 활용하여 React 애플리케이션에서 테마를 변경하는 방법에 대해 알아보겠습니다.

Redux Thunk 소개

Redux Thunk는 Redux 미들웨어 중 하나로, 비동기 작업을 처리하기 위해 사용됩니다. 이를 활용하면 애플리케이션에서 비동기 작업을 수행하거나, 서버와의 데이터 통신을 처리할 수 있습니다.

애플리케이션 테마 변경을 위한 Redux Thunk 구현

Redux Store 작성

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
   
const store = createStore(rootReducer, applyMiddleware(thunk));
   
export default store;

액션 타입 정의
```
export const SET_THEME = 'SET_THEME';
```

액션 생성자 작성

export const setTheme = (theme) => {
  return (dispatch) => {
    // 비동기 작업 수행
    // ...
   
    // 테마 변경 액션 디스패치
    dispatch({
      type: SET_THEME,
      payload: theme
    });
  };
};

리듀서 작성

import { SET_THEME } from '../actions';
   
const initialState = {
  theme: 'light'
};
   
const themeReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_THEME:
      return {
        ...state,
        theme: action.payload
      };
    default:
      return state;
  }
};
   
export default themeReducer;

컴포넌트에서 테마 변경 기능 사용

import React from 'react';
import { useDispatch } from 'react-redux';
import { setTheme } from '../actions';
   
const ThemeSelector = () => {
  const dispatch = useDispatch();
   
  const handleChangeTheme = (theme) => {
    dispatch(setTheme(theme));
  };
   
  return (
    <div>
      <button onClick={() => handleChangeTheme('light')}>Light 테마</button>
      <button onClick={() => handleChangeTheme('dark')}>Dark 테마</button>
    </div>
  );
};
   
export default ThemeSelector;

위의 방법을 통해 Redux Thunk를 활용하여 애플리케이션의 테마를 변경하는 기능을 구현할 수 있습니다. 위와 같이 작성된 코드는 Redux Store에 Thunk 미들웨어를 적용하고, 액션 생성자에서 비동기 작업을 처리한 후 테마 변경 액션을 디스패치합니다.

결론

Redux Thunk를 활용하여 React 애플리케이션의 테마를 변경하는 방법을 살펴보았습니다. 이를 통해 사용자에게 테마 선택의 자유를 제공하고, 사용자 경험을 향상시킬 수 있습니다.

#React #Redux #ReduxThunk