개요

이번 글에서는 Redux Thunk를 활용하여 디바운싱(debouncing)된 검색 기능을 구현하는 방법에 대해 알아보겠습니다. 디바운싱은 사용자의 입력이 일정 시간 동안 없을 경우에만 검색을 실행하는 기능을 의미합니다. 이를 통해 불필요한 API 호출을 줄이고, 성능을 개선할 수 있습니다.

Redux Thunk란?

Redux Thunk는 Redux 미들웨어의 하나로, 비동기 액션을 처리하기 위해 사용됩니다. 일반적으로 Redux는 동기적인 액션만을 처리하는데, Redux Thunk를 사용하면 비동기적인 액션을 만들 수 있습니다. 이를 통해 API 호출 등의 비동기 작업을 효율적으로 처리할 수 있습니다.

디바운싱된 검색 기능 구현하기

1. Redux Thunk 설치하기 Redux Thunk를 사용하기 위해 먼저 패키지를 설치해야 합니다. 다음 명령을 사용하여 설치합니다.

   npm install redux-thunk
   

2. 액션과 액션 생성자 함수 만들기

   // actions.js 파일
   import { createAsyncThunk } from 'redux-thunk';
   import { debounce } from 'lodash';
   
   // API 호출 함수
   const searchAPI = async (keyword) => {
     // API 호출 로직 작성
   };
   
   // 디바운스된 액션 생성자 함수
   export const search = createAsyncThunk('search', debounce(
     async (keyword, thunkAPI) => {
       try {
         const response = await searchAPI(keyword);
         return response.data;
       } catch (error) {
         return thunkAPI.rejectWithValue(error);
       }
     },
     300, // 디바운스 시간 (300ms로 설정)
   ));
   

3. 리듀서 작성하기

   // reducer.js 파일
   import { createSlice } from '@reduxjs/toolkit';
   import { search } from './actions';
   
   // 초기 상태 정의
   const initialState = {
     keyword: '',
     results: [],
     loading: false,
     error: null,
   };
   
   // 리듀서 생성
   const searchReducer = createSlice({
     name: 'search',
     initialState,
     reducers: {},
     extraReducers: (builder) => {
       builder
         .addCase(search.pending, (state) => {
           state.loading = true;
           state.error = null;
         })
         .addCase(search.fulfilled, (state, action) => {
           state.loading = false;
           state.results = action.payload;
         })
         .addCase(search.rejected, (state, action) => {
           state.loading = false;
           state.error = action.error;
         });
     },
   });
   
   export default searchReducer.reducer;
   

4. 컴포넌트에서 디바운싱된 검색 기능 사용하기

   // SearchComponent.js 파일
   import React, { useCallback } from 'react';
   import { useDispatch, useSelector } from 'react-redux';
   import { search } from './actions';
   
   const SearchComponent = () => {
     const dispatch = useDispatch();
     const { keyword, results, loading, error } = useSelector((state) => state.search);
   
     const handleSearch = useCallback(
       (event) => {
         const newKeyword = event.target.value.trim();
         dispatch(search(newKeyword));
       },
       [dispatch]
     );
   
     return (
       <div>
         <input type="text" value={keyword} onChange={handleSearch} />
         {loading && <div>Loading...</div>}
         {error && <div>Error: {error.message}</div>}
         <ul>
           {results.map((result) => (
             <li key={result.id}>{result.name}</li>
           ))}
         </ul>
       </div>
     );
   };
   
   export default SearchComponent;
   

결론

Redux Thunk를 사용하여 디바운싱된 검색 기능을 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 활용하면 Redux 애플리케이션에서 비동기 작업을 간편하게 처리할 수 있습니다. 디바운싱된 검색 기능을 구현하여 성능을 개선하고 사용자 경험을 향상시킬 수 있습니다.

참고 자료

• Redux Thunk 공식 문서: https://github.com/reduxjs/redux-thunk
• Lodash debounce 문서: https://lodash.com/docs/4.17.15#debounce