Redux Thunk를 사용한 키보드 단축키 구현 예제

18 Oct 2023

redux

많은 웹 애플리케이션에서 키보드 단축키를 구현하는 것은 매우 유용합니다. Redux와 Redux Thunk를 사용하여 키보드 단축키를 구현하는 방법을 알아보겠습니다.

Redux Thunk 소개

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 작업을 처리하기 위해 Redux 액션 생성자에서 함수를 반환할 수 있게 해줍니다. 이를 사용하여 서버와의 통신이나 타이머 이벤트 등의 비동기 작업을 처리할 수 있습니다.

예제 코드

먼저 Redux Thunk를 설치합니다.

npm install redux-thunk

다음으로, Redux Thunk 미들웨어를 적용하기 위해 Redux Store를 구성합니다. store.js 파일을 만들고 다음과 같이 코드를 작성합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

이제 Redux Thunk를 사용하여 키보드 단축키를 처리하는 액션 생성자를 만들어보겠습니다. actions.js 파일을 만들고 다음과 같이 코드를 작성합니다.

import { createAsyncThunk } from 'redux-thunk';

export const handleShortcut = createAsyncThunk('handleShortcut', (event) => {
  return (dispatch, getState) => {
    const { keycode } = event; // 단축키의 키코드를 가져옵니다.
    // 특정 단축키에 대한 액션을 디스패치합니다.
    if (keycode === 13) {
      dispatch({ type: 'ENTER_SHORTCUT' });
    } else if (keycode === 27) {
      dispatch({ type: 'ESC_SHORTCUT' });
    }
  }
});

위의 예제 코드에서는 createAsyncThunk 함수를 사용하여 비동기 thunk 액션 생성자를 만들었습니다. 이 액션 생성자는 키보드 이벤트 객체를 매개변수로 받아와 특정 단축키에 대한 액션을 디스패치하는 역할을 합니다.

마지막으로, 리듀서에서 해당 액션에 대한 상태 변화를 처리합니다. reducers.js 파일을 만들고 다음과 같이 코드를 작성합니다.

const initialState = {
  shortcutActivated: false,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ENTER_SHORTCUT':
      return {
        ...state,
        shortcutActivated: true,
      };
    case 'ESC_SHORTCUT':
      return {
        ...state,
        shortcutActivated: false,
      };
    default:
      return state;
  }
};

export default rootReducer;

위의 예제 코드에서는 shortcutActivated라는 상태 값이 키보드 단축키에 의해 활성화되거나 비활성화되는 예를 보여주고 있습니다.

마무리

Redux Thunk를 사용하여 키보드 단축키를 구현하는 방법을 알아보았습니다. 이를 활용하면 웹 애플리케이션에서 훨씬 더 강력한 상태 관리와 비동기 작업 처리를 할 수 있습니다. 더 많은 Redux Thunk 사용 예제와 자세한 정보는 공식 문서를 참조하시기 바랍니다.

#redux #redux-thunk