Redux Thunk를 활용한 데이터 캐싱 방법

18 Oct 2023

redux

Redux Thunk는 Redux의 미들웨어로서, 비동기 액션을 처리하기 위해 사용됩니다. 데이터 캐싱은 빠른 데이터 접근과 성능 향상을 위해 사용되는 중요한 기술입니다. 이 글에서는 Redux Thunk를 활용하여 데이터 캐싱을 구현하는 방법에 대해 알아보겠습니다.

데이터 캐싱의 개념

데이터 캐싱은 매번 데이터를 요청할 때마다 서버에 요청하는 대신, 이전에 받아온 데이터를 재사용하여 빠른 응답을 가능하게 해주는 기술입니다. 캐싱을 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

Redux Thunk란?

Redux Thunk는 Redux에서 비동기 작업을 수행하기 위해 사용되는 미들웨어입니다. Redux Thunk를 활용하면 액션 생성자 함수에서 비동기 작업을 처리할 수 있습니다. 액션 생성자 함수는 일반적으로 객체를 반환하지만, Redux Thunk를 사용하면 함수를 반환할 수 있습니다.

데이터 캐싱을 위한 Redux Thunk 사용하기

먼저, 필요한 데이터를 가져올 비동기 작업을 하는 액션 생성자 함수를 만듭니다. 이 함수는 dispatch를 인자로 받으며, 비동기 작업이 완료되면 액션을 디스패치하는 방식으로 구현합니다. 예를 들면 다음과 같습니다.

import { fetchData } from 'api'; // 실제 데이터를 가져오는 API 호출 함수

export const fetchUserData = () => {
  return async (dispatch) => {
    const data = await fetchData();
    dispatch({ type: 'FETCH_USER_DATA', payload: data });
  };
};

이제 이 액션 생성자 함수를 사용하여 데이터를 가져와야 하는 컴포넌트에서 dispatch를 호출합니다. 예를 들면 다음과 같습니다.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserData } from 'actions';

const UserComponent = () => {
  const userData = useSelector(state => state.userData); // Redux에서 관리되는 유저 데이터
  const dispatch = useDispatch();

  useEffect(() => {
    // 데이터가 캐시에 없을 경우에만 데이터를 가져옴
    if (!userData) {
      dispatch(fetchUserData());
    }
  }, [dispatch, userData]);

  return (
    <div>
      {userData ? (
        <div>
          <h1>{userData.name}</h1>
          <p>{userData.email}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserComponent;

위의 예제에서 fetchUserData 액션 생성자 함수를 호출하기 전에 userData 값이 Redux 상태에 캐싱되어 있는지 확인합니다. 데이터가 캐시에 없을 경우에만 데이터를 가져오기 때문에, 중복 요청을 방지하고 불필요한 네트워크 트래픽을 줄일 수 있습니다.

결론

Redux Thunk를 활용한 데이터 캐싱은 Redux를 사용하는 애플리케이션에서 매우 유용한 기술입니다. 데이터를 가져올 때마다 불필요한 요청을 방지하고 성능을 향상시킬 수 있습니다. Redux Thunk를 사용하여 데이터를 가져오는 액션 생성자 함수를 작성하고, 컴포넌트에서 이를 사용하여 데이터를 가져오는 방식은 간단하면서도 효율적입니다.

#redux #thunk