이번 기술 블로그에서는 Redux Thunk를 사용하여 즐겨찾기 기능을 구현하는 방법에 대해 알아보겠습니다. Redux Thunk는 Redux 미들웨어 중 하나로, 비동기 작업을 처리하기 위해 사용됩니다.

즐겨찾기 기능의 구현

1. Redux Thunk 설치하기

   npm install redux-thunk
   

   먼저 Redux Thunk를 설치해야 합니다.

2. Redux Store 설정하기

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './reducers';
   
   const store = createStore(rootReducer, applyMiddleware(thunk));
   

   Redux Store를 생성할 때, applyMiddleware 함수를 사용하여 Redux Thunk를 미들웨어로 등록해야 합니다.

3. Redux Action 생성하기

   export const addToFavorites = (item) => {
     return (dispatch) => {
       // API 호출 등의 비동기 작업 수행
       // 즐겨찾기 추가 완료시 dispatch 호출
       dispatch({ type: 'ADD_TO_FAVORITES', payload: item });
     };
   };
   

   Redux Action 함수 내부에서 비동기 작업을 처리하기 위해 Thunk 함수를 반환해야 합니다. 비동기 작업이 완료된 후에는 즐겨찾기를 추가하는 기능을 수행하는 Dispatch 함수를 호출합니다.

4. Redux Reducer 업데이트하기

   const initialState = {
     favorites: []
   };
   
   const rootReducer = (state = initialState, action) => {
     switch (action.type) {
       case 'ADD_TO_FAVORITES':
         return {
           ...state,
           favorites: [...state.favorites, action.payload]
         };
       default:
         return state;
     }
   };
   

   즐겨찾기를 추가하는 액션을 처리하기 위해 Redux Reducer를 업데이트합니다. 즐겨찾기 목록을 저장하는 favorites 배열에 새로운 아이템을 추가하는 로직을 추가합니다.

5. 컴포넌트에서 즐겨찾기 기능 사용하기

   import React from 'react';
   import { connect } from 'react-redux';
   import { addToFavorites } from './actions';
   
   const Item = ({ item, addToFavorites }) => {
     return (
       <div>
         <h3>{item.name}</h3>
         <button onClick={() => addToFavorites(item)}>즐겨찾기에 추가하기</button>
       </div>
     );
   };
   
   const mapStateToProps = (state) => {
     return { favorites: state.favorites };
   };
   
   export default connect(mapStateToProps, { addToFavorites })(Item);
   

   즐겨찾기 기능을 사용하기 위해 Redux Store와 액션을 컴포넌트에 연결합니다. connect 함수를 사용하여 컴포넌트와 Redux Store를 연결하고, addToFavorites 함수를 props로 전달합니다. 이제 버튼을 클릭하면 addToFavorites 함수가 호출되어 Redux Action이 dispatch되는 것을 확인할 수 있습니다.

마치며

이번에는 Redux Thunk를 사용하여 즐겨찾기 기능을 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 처리하는 데 더욱 편리하게 구현할 수 있습니다.