Redux Thunk를 활용한 웹 페이지 퍼포먼스 최적화 방법

18 Oct 2023

redux

소개

Redux Thunk는 Redux 미들웨어 중 하나로, 비동기 작업을 처리하는 데 사용됩니다. 이를 활용하여 웹 페이지의 퍼포먼스를 최적화할 수 있습니다. 이 글에서는 Redux Thunk를 활용한 웹 페이지 퍼포먼스 최적화 방법에 대해 다루어 보겠습니다.

1. 비동기 작업 분리

Redux Thunk를 사용하면, 액션 생성자 함수에서 비동기 작업을 분리할 수 있습니다. 일반적으로 API 호출과 같은 비동기 작업은 액션 객체를 반환하는 대신, 비동기 작업을 수행하는 함수를 반환하도록 작성해야 합니다. 이렇게 함으로써 비동기 작업이 완료될 때까지 기다리는 동안 다른 작업을 수행할 수 있습니다.

// 비동기 작업을 처리하는 액션 생성자 함수
export const fetchData = () => {
  return async (dispatch) => {
    dispatch(startFetching());
    
    try {
      const response = await api.fetchData();
      dispatch(fetchSuccess(response.data));
    } catch (error) {
      dispatch(fetchFailure(error.message));
    }
  };
};

2. 데이터 캐싱

Redux Thunk를 활용하여 데이터를 가져올 때, 캐싱을 통해 중복된 API 호출을 방지할 수 있습니다. 이를 위해 액션 생성자 함수 내에서 이전에 가져온 데이터가 있는지 확인하고, 있는 경우에는 해당 데이터를 반환하고 API 호출을 생략할 수 있습니다.

// 데이터 캐싱을 사용하는 액션 생성자 함수
export const fetchData = () => {
  return async (dispatch, getState) => {
    const { data } = getState().data;
    
    if (data) {
      return data;
    }
    
    dispatch(startFetching());
    
    try {
      const response = await api.fetchData();
      dispatch(fetchSuccess(response.data));
      return response.data;
    } catch (error) {
      dispatch(fetchFailure(error.message));
    }
  };
};

3. 배치 처리

Redux Thunk를 사용하면 여러 비동기 작업을 한 번에 처리할 수도 있습니다. 예를 들어, 여러 API 호출을 병렬로 요청하고 응답을 받은 순서대로 처리할 수 있습니다. 이를 통해 네트워크 리소스를 효율적으로 사용하고, 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.

// 배치 처리하는 액션 생성자 함수
export const fetchBatchData = () => {
  return async (dispatch) => {
    dispatch(startFetching());
    
    try {
      const [response1, response2, response3] = await Promise.all([
        api.fetchData1(),
        api.fetchData2(),
        api.fetchData3()
      ]);
      
      dispatch(fetchSuccess1(response1.data));
      dispatch(fetchSuccess2(response2.data));
      dispatch(fetchSuccess3(response3.data));
    } catch (error) {
      dispatch(fetchFailure(error.message));
    }
  };
};

결론

Redux Thunk를 활용하여 웹 페이지의 퍼포먼스를 최적화할 수 있습니다. 비동기 작업 분리, 데이터 캐싱, 배치 처리 등의 방법을 활용하여 웹 페이지의 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용은 Redux Thunk 공식 문서를 참고하세요.

#performance #reduxthunk