Redux Thunk를 활용한 자동 완성 기능 추가 방법

18 Oct 2023

redux

자동 완성 기능은 사용자가 입력한 텍스트를 기반으로 가능한 값을 추천해주는 기능입니다. 이 기능은 웹 애플리케이션에서 자주 사용되며, Redux Thunk를 활용하여 구현할 수 있습니다. 이번 글에서는 Redux Thunk를 사용하여 자동 완성 기능을 추가하는 방법을 알아보겠습니다.

1. Redux Thunk 설치

먼저, Redux Thunk를 설치해야 합니다. Redux Thunk는 Redux의 미들웨어로, 비동기 작업을 처리하는 데 사용됩니다. 아래 명령을 사용하여 Redux Thunk를 설치합니다.

npm install redux-thunk

2. Redux Thunk 설정

Redux Thunk를 사용하기 위해선 Redux 스토어를 설정해야 합니다. 스토어를 생성할 때, applyMiddleware 함수를 사용하여 Redux Thunk를 미들웨어로 추가합니다. 아래는 Redux 스토어 설정 예시입니다.

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

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

3. 자동 완성 액션 생성자 작성

자동 완성 기능은 비동기 작업을 수행해야 하므로 Redux Thunk의 장점을 활용할 수 있습니다. 자동 완성 기능에 필요한 데이터를 가져오는 비동기 액션 생성자를 작성합니다. 아래는 자동 완성 액션 생성자의 예시입니다.

import axios from 'axios';

export const fetchAutoCompleteResults = (query) => {
  return (dispatch) => {
    // API 요청을 보내고 결과를 받아옴
    axios.get(`/api/autocomplete?q=${query}`)
      .then((response) => {
        // 결과를 받아온 후, 받아온 데이터로 액션을 디스패치함
        dispatch({ type: 'FETCH_AUTO_COMPLETE_RESULTS_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        // 에러 처리
        dispatch({ type: 'FETCH_AUTO_COMPLETE_RESULTS_FAILURE', payload: error.message });
      });
  };
};

위 예시에서는 axios를 활용하여 API 요청을 보내고, 받아온 데이터를 기반으로 액션을 디스패치합니다.

4. Redux 리듀서 업데이트

마지막으로, Redux 리듀서를 업데이트하여 자동 완성 기능과 관련된 상태를 처리합니다. 예를 들어, 자동 완성 결과를 저장하는 상태와 관련된 새로운 액션 타입과 처리 로직을 추가합니다.

const initialState = {
  autoCompleteResults: [],
  isLoading: false,
  error: null
};

const autoCompleterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_AUTO_COMPLETE_RESULTS_SUCCESS':
      return {
        ...state,
        autoCompleteResults: action.payload,
        isLoading: false,
        error: null
      };
    case 'FETCH_AUTO_COMPLETE_RESULTS_FAILURE':
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

위 예시에서는 FETCH_AUTO_COMPLETE_RESULTS_SUCCESS와 FETCH_AUTO_COMPLETE_RESULTS_FAILURE 액션에 대한 처리 로직이 포함되어 있습니다.

마무리

이제 Redux Thunk를 활용하여 자동 완성 기능을 추가하는 방법을 살펴보았습니다. Redux Thunk를 사용하면 비동기 작업을 쉽게 처리할 수 있으며, 자동 완성 기능과 같은 기능을 구현할 때 유용하게 활용할 수 있습니다. 자동 완성 기능을 구현하고 싶은 경우, Redux Thunk를 고려해보세요!

다양한 Redux Thunk 사용 예제 및 자세한 내용은 Redux Thunk 공식 문서를 참고하시기 바랍니다.

참고 문서: Redux Thunk 공식 문서

#React #Redux #ReduxThunk