Redux Thunk를 사용한 페이지 로딩 속도 최적화 예제

18 Oct 2023

redux

많은 웹 애플리케이션에서 페이지 로딩 속도는 매우 중요한 요소입니다. 느린 로딩 속도는 사용자 경험을 저하시킬 수 있기 때문에 최적화는 반드시 고려되어야 합니다. 이번 블로그 포스트에서는 Redux Thunk를 사용하여 페이지 로딩 속도를 최적화하는 예제를 살펴보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux 미들웨어의 일종으로, 비동기 작업을 처리하고 액션 디스패치를 조절하는 데 사용됩니다. 이를 통해 비동기 작업을 처리하고 액션을 디스패치한 뒤 상태를 업데이트할 수 있습니다.

예제 설명

여러분은 Redux를 사용하여 웹 애플리케이션을 개발하고 있습니다. 페이지 로딩 시간을 최적화하기 위해 비동기 작업을 처리하고, 상태를 업데이트하는 과정을 Redux Thunk를 이용하여 개선하고자 합니다.

import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit';

// 비동기 작업을 위한 Thunk 액션 생성자
export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await fetch('https://api.example.com/posts');
    const data = await response.json();
    return data;
  }
);

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    loading: false,
    posts: [],
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

const store = configureStore({ reducer: postsSlice.reducer });

// 페이지 로딩 시 비동기 작업 실행
store.dispatch(fetchPosts());

// 상태 변화에 따른 페이지 UI 업데이트
const renderPosts = () => {
  const posts = store.getState().posts.posts;
  // 페이지에 포스트 목록 렌더링
}

store.subscribe(renderPosts);

실제 예제에서는 createAsyncThunk 함수를 사용하여 비동기 작업을 처리하는 thunk 액션 생성자인 fetchPosts를 만들어 사용합니다. 이 함수는 API에서 포스트 데이터를 가져오는 비동기 작업을 수행하고, 작업이 성공하면 결과를 상태에 업데이트합니다.

fetchPosts 액션을 디스패치한 뒤, 상태 변화를 구독하여 UI를 업데이트하는 renderPosts 함수를 만들어 호출합니다. 이를 통해 포스트 목록이 로딩되고 렌더링되는 동안 사용자는 로딩 화면을 보게 될 것입니다.

결론

Redux Thunk를 사용하면 비동기 작업을 효과적으로 관리하고 상태를 업데이트할 수 있습니다. 이를 통해 페이지 로딩 속도를 최적화하고 사용자 경험을 향상시킬 수 있습니다. Redux Thunk는 Redux 미들웨어의 한 가지 예시일 뿐이며, 다른 미들웨어나 기술을 사용하여도 같은 목적을 달성할 수 있습니다.

#Redux #Thunk