Redux Toolkit을 이용한 자바스크립트 앱의 키보드 단축키 지원

21 Sep 2023

redux

키보드 단축키는 사용자들에게 앱을 더 효율적으로 사용할 수 있는 방법을 제공해줍니다. 자바스크립트 앱에서 키보드 단축키를 지원하기 위해서 Redux Toolkit을 사용하는 것은 좋은 선택입니다. Redux Toolkit은 Redux 앱을 구성하는 데 도움을 주는 강력한 라이브러리입니다.

Redux Toolkit 설치

먼저 Redux Toolkit을 설치해야 합니다. npm을 사용한다면 다음 명령어를 터미널에 입력하여 Redux Toolkit을 설치할 수 있습니다.

npm install @reduxjs/toolkit

액션 생성자와 리듀서 작성

Redux Toolkit은 액션 생성자와 리듀서를 작성하는 과정을 단순화시켜줍니다. 액션 생성자는 키보드 단축키와 연결된 액션을 생성하는 함수입니다. 리듀서는 이 액션을 처리하는 함수입니다.

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

const initialState = {
  counter: 0
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

단축키 지원하기

Redux Toolkit으로 작성한 리덕스 앱에서 키보드 단축키를 지원하려면 이벤트 핸들러를 사용해야 합니다. 앱 컴포넌트에서 useEffect 훅을 사용하여 이벤트 핸들러를 등록할 수 있습니다.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowUp') {
        dispatch(increment());
      } else if (e.key === 'ArrowDown') {
        dispatch(decrement());
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    // 앱 컴포넌트의 내용...
  );
};

export default App;

위의 예시 코드에서는 ArrowUp 키를 누르면 increment 액션이 디스패치되고, ArrowDown 키를 누르면 decrement 액션이 디스패치됩니다. 이렇게 Redux Toolkit을 사용하면 간단하게 키보드 단축키를 지원할 수 있습니다.

#redux #redux-toolkit