Colin's Blog
Redux Thunk를 사용한 상품 슬라이드쇼 구현 예제

소개

Redux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어입니다. 이 예제에서는 Redux Thunk를 사용하여 상품 슬라이드쇼를 구현하는 방법을 안내합니다.

필요한 패키지 설치

먼저 Redux와 Redux Thunk를 설치해야 합니다. 다음 명령을 실행하여 필요한 패키지를 설치하세요.

npm install redux redux-thunk

액션(Action) 정의하기

슬라이드쇼 기능을 위해 다음과 같은 액션을 정의합니다.

// src/actions/productActions.js

// 상품 정보를 가져오는 액션
export const fetchProducts = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_PRODUCTS_REQUEST' });
    // 비동기로 상품 데이터를 가져온 후에 액션을 디스패치합니다.
    api.get('/products')
      .then((response) => {
        dispatch({
          type: 'FETCH_PRODUCTS_SUCCESS',
          payload: response.data
        });
      })
      .catch((error) => {
        dispatch({
          type: 'FETCH_PRODUCTS_FAILURE',
          payload: error.message
        });
      });
  };
};

// 다음 상품으로 이동하는 액션
export const nextProduct = () => {
  return { type: 'NEXT_PRODUCT' };
};

// 이전 상품으로 이동하는 액션
export const prevProduct = () => {
  return { type: 'PREV_PRODUCT' };
};

리듀서(Reducer) 작성하기

액션에 응답하여 상태를 변경하는 리듀서를 작성합니다.

// src/reducers/productReducer.js

const initialState = {
  loading: false,
  error: null,
  products: [],
  currentProductIndex: 0
};

const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_PRODUCTS_REQUEST':
      return {
        ...state,
        loading: true,
        error: null
      };
    case 'FETCH_PRODUCTS_SUCCESS':
      return {
        ...state,
        loading: false,
        products: action.payload
      };
    case 'FETCH_PRODUCTS_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    case 'NEXT_PRODUCT':
      return {
        ...state,
        currentProductIndex: (state.currentProductIndex + 1) % state.products.length
      };
    case 'PREV_PRODUCT':
      return {
        ...state,
        currentProductIndex: (state.currentProductIndex - 1 + state.products.length) % state.products.length
      };
    default:
      return state;
  }
};

export default productReducer;

스토어(Store) 설정하기

Redux 스토어를 구성하고 Redux Thunk 미들웨어를 적용하기 위해 다음과 같이 설정합니다.

// src/store.js

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

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

export default store;

컴포넌트(Component)에서 사용하기

위에서 작성한 액션과 리듀서를 사용하여 슬라이드쇼 컴포넌트를 만들어 봅시다.

// src/components/Slideshow.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts, nextProduct, prevProduct } from '../actions/productActions';

const Slideshow = () => {
  const dispatch = useDispatch();
  const { loading, error, products, currentProductIndex } = useSelector((state) => state);

  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  const currentProduct = products[currentProductIndex];

  return (
    <div>
      <h1>{currentProduct.name}</h1>
      <img src={currentProduct.image} alt={currentProduct.name} />
      <button onClick={() => dispatch(prevProduct())}>Previous</button>
      <button onClick={() => dispatch(nextProduct())}>Next</button>
    </div>
  );
};

export default Slideshow;

위 예제에서는 fetchProducts 액션을 호출하여 상품 데이터를 가져옵니다. 가져온 데이터는 리덕스 스토어에 저장되며, 현재 상품 인덱스를 통해 해당 상품을 보여줍니다. 이전과 다음 버튼을 클릭하면 prevProduct와 nextProduct 액션이 호출되어 상품 인덱스를 변경하고 다음 상품을 보여줍니다.

결론

Redux Thunk를 사용하여 상품 슬라이드쇼를 구현하는 방법을 안내했습니다. Redux Thunk를 사용하면 비동기 작업을 쉽게 처리할 수 있으므로 프로젝트에서 유용하게 활용할 수 있습니다.

참고자료

© 2018 Colin. All rights reserved.