Colin's Blog
Redux Thunk를 활용한 클립보드 기능 구현 방법

클립보드 기능은 사용자가 텍스트나 이미지 등을 복사하여 임시 저장하는 기능입니다. 이번 포스트에서는 Redux Thunk를 사용하여 클립보드 기능을 구현하는 방법을 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 액션을 처리할 수 있도록 도와줍니다. Redux를 사용하여 상태 관리를 할 때, 비동기 작업을 처리해야 하는 경우에 Redux Thunk를 사용할 수 있습니다.

클립보드 상태 관리

먼저, 클립보드의 상태를 Redux Store에서 관리해야 합니다. 아래와 같이 clipboard라는 리듀서를 생성합니다.

// clipboardReducer.js
const initialState = {
  text: '',
  image: null,
};

const clipboardReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_TEXT':
      return {
        ...state,
        text: action.payload,
      };
    case 'SET_IMAGE':
      return {
        ...state,
        image: action.payload,
      };
    default:
      return state;
  }
};

export default clipboardReducer;

클립보드의 텍스트와 이미지는 setText와 setImage 액션으로 변경할 수 있도록 설정하였습니다.

클립보드 액션 생성자

이제, 클립보드 상태를 변경하는 액션 생성자를 작성해보겠습니다. 우선, 텍스트를 설정하는 setText와 이미지를 설정하는 setImage 액션 생성자를 만들어봅시다.

// clipboardActions.js
export const setText = text => {
  return {
    type: 'SET_TEXT',
    payload: text,
  };
};

export const setImage = image => {
  return {
    type: 'SET_IMAGE',
    payload: image,
  };
};

비동기 액션 생성자

이제 비동기 작업을 처리하는 액션 생성자를 만들어봅시다. 클립보드에는 복사된 내용을 붙여넣기하는 기능도 있어야 합니다. 아래의 코드는 pasteFromClipboard 액션 생성자로 클립보드에 있는 내용을 가져와서 상태에 설정하는 작업을 수행합니다.

// clipboardActions.js
export const pasteFromClipboard = () => {
  return dispatch => {
    // 클립보드에서 텍스트 가져오기
    const clipboardText = window.navigator.clipboard.readText();

    // 클립보드에서 이미지 가져오기
    const clipboardImage = window.navigator.clipboard.read();

    // 가져온 내용을 상태에 설정
    dispatch(setText(clipboardText));
    dispatch(setImage(clipboardImage));
  };
};

Redux Store 설정

마지막으로, Redux Store를 설정해주어야 합니다. redux-thunk 미들웨어를 함께 적용하여 비동기 액션을 처리할 수 있도록 해야 합니다. 아래의 코드는 store.js 파일에 Redux Store를 설정하는 예시입니다.

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import clipboardReducer from './clipboardReducer';

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

export default store;

마무리

이제 Redux Thunk를 활용하여 클립보드 기능을 구현하는 방법을 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 처리하는 것이 간편해집니다. 클립보드 기능 외에도 다양한 비동기 작업을 Redux Thunk를 활용하여 구현할 수 있습니다. 활용 방법에 대해 자세히 알아보시기 바랍니다.

참고 자료

#redux #redux-thunk

© 2018 Colin. All rights reserved.