Colin's Blog
Redux Thunk를 사용하여 데이터 필터링하기

Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 예측 가능한 상태 컨테이너입니다. Redux Thunk는 Redux 미들웨어의 한 종류로, 비동기 작업을 처리하고 액션이 발생하기 전에 추가적인 로직을 수행할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 Redux Thunk를 사용하여 데이터를 필터링하는 방법에 대해 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux 액션 크리에이터(액션 만들기 함수)가 일반적인 객체 대신 함수를 반환할 수 있도록 해주는 미들웨어입니다. 이 함수는 Redux 스토어의 dispatch 메소드와 getState 메소드를 매개변수로 받고, 비동기 작업을 처리하거나 추가적인 로직을 수행할 수 있습니다.

데이터 필터링 예제

이제 실제로 Redux Thunk를 사용하여 데이터를 필터링하는 예제를 살펴보겠습니다.

// 액션 크리에이터
const filterData = (filter) => {
  return (dispatch, getState) => {
    // 비동기 작업 수행 예시 (여기서는 setTimeout 사용)
    setTimeout(() => {
      const { data } = getState(); // 현재 상태의 데이터 가져오기
      const filteredData = data.filter(item => item.category === filter); // 필터링

      dispatch({ type: 'FILTER_DATA_SUCCESS', payload: filteredData }); // 필터링된 데이터에 대한 액션 디스패치
    }, 1000);
  };
};

// 컴포넌트에서 사용 예시
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const MyComponent = () => {
  const dispatch = useDispatch();
  const filteredData = useSelector(state => state.filteredData);

  useEffect(() => {
    dispatch(filterData('category1')); // 데이터 필터링 액션 디스패치
  }, [dispatch]);

  return (
    <div>
      {filteredData.map(item => (
        <div>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;

이 예제에서는 filterData 액션 크리에이터를 정의합니다. 이 함수는 Redux Thunk를 사용하여 비동기 작업을 수행하고, 상태의 필터링된 데이터에 대한 액션을 디스패치합니다. 컴포넌트에서 useDispatch와 useSelector 훅을 사용하여 filterData 액션을 디스패치하고 상태를 가져올 수 있습니다.

이처럼 Redux Thunk를 사용하면 비동기 작업과 추가적인 로직을 수행하는 것이 간단하고 쉽습니다. 필요에 따라 Redux Thunk를 통해 데이터를 필터링하거나 다른 비동기 작업을 처리할 수 있으며, Redux 상태 관리를 보다 유연하게 구성할 수 있습니다.

중요한 참고 사항

© 2018 Colin. All rights reserved.