Redux Toolkit 활용 실습(4): 미들웨어 간소화 실습

미들웨어 간소화

Redux Toolkit의 createAsyncThunk 사용

Redux Toolkit의 createAsyncThunk를 사용하면 비동기 작업과 관련된 코드가 크게 간소화됩니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하며, Redux Toolkit을 사용하여 비동기 작업을 어떻게 쉽게 구현할 수 있는지 살펴보겠습니다.

1. React 애플리케이션 생성 및 Redux Toolkit 설치

먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.

npx create-react-app my-redux-toolkit-app
cd my-redux-toolkit-app
npm install @reduxjs/toolkit react-redux

2. 전체 파일 구조

my-redux-toolkit-app/
├── src/
│   ├── app/
│   │   └── store.js
│   ├── features/
│   │   └── user/
│   │       └── userSlice.js
│   ├── components/
│   │   └── UserProfile.js
│   ├── App.js
│   └── index.js
└── package.json

3. 스토어 설정 간소화

src/app/store.js 파일을 생성하고 다음과 같이 작성합니다:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/user/userSlice';

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export default store;

4. createAsyncThunk를 사용한 비동기 액션 생성

• 애플리케이션의 전체 파일 구조는 다음과 같습니다:
• 먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.
• Redux Toolkit의 createAsyncThunk를 사용하면 비동기 작업과 관련된 코드가 크게 간소화됩니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하며, Redux Toolkit을 사용하여 비동기 작업을 어떻게 쉽게 구현할 수 있는지 살펴보겠습니다.
• configureStore를 사용하여 기본적으로 Redux DevTools와 미들웨어가 설정되어 있어 추가적인 설정이 필요 없습니다.
• 애플리케이션의 전체 파일 구조는 다음과 같습니다:
• 먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.
• Redux Toolkit의 createAsyncThunk를 사용하면 비동기 작업과 관련된 코드가 크게 간소화됩니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하며, Redux Toolkit을 사용하여 비동기 작업을 어떻게 쉽게 구현할 수 있는지 살펴보겠습니다.

4. createAsyncThunk를 사용한 비동기 액션 생성

createAsyncThunk를 사용하여 비동기 작업을 처리합니다. 비동기 액션을 쉽게 생성하고, 상태 관리를 자동으로 처리해줍니다.

src/features/user/userSlice.js 파일을 생성하고 다음과 같이 작성합니다:

// src/features/user/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
  const response = await fetch(`/api/user/${userId}`);
  return response.json();
});

const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

5. React 컴포넌트에서 비동기 액션 사용하기

React 컴포넌트에서 useSelector와 useDispatch를 사용하여 비동기 액션을 처리하고 상태를 관리합니다.

• src/components/UserProfile.js 파일을 생성하고 다음과 같이 작성합니다:

// src/components/UserProfile.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUser } from '../features/user/userSlice';

function UserProfile({ userId }) {
  const user = useSelector((state) => state.user.user);
  const status = useSelector((state) => state.user.status);
  const dispatch = useDispatch();

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUser(userId));
    }
  }, [status, userId, dispatch]);

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

  if (status === 'failed') {
    return <div>Error loading user data.</div>;
  }

  return (
    <div>
      {user ? <h2>Welcome, {user.name}!</h2> : <p>No user data available.</p>}
    </div>
  );
}

export default UserProfile;

6. 전체 애플리케이션 통합 및 실행

이제 애플리케이션을 통합하여 실행 가능한 상태로 만듭니다.

1. src/index.js 파일에서 스토어를 애플리케이션에 제공하도록 수정합니다:

   // src/index.js
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { Provider } from 'react-redux';
   import store from './app/store';
   import App from './App';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );

2. src/App.js 파일에서 UserProfile 컴포넌트를 추가합니다:

   // src/App.js
   import React from 'react';
   import UserProfile from './components/UserProfile';
   
   function App() {
     return (
       <div className="App">
         <h1>Redux Toolkit User Profile</h1>
         <UserProfile userId={1} />
       </div>
     );
   }
   
   export default App;

3. 애플리케이션 실행하기

   npm start

   브라우저에서 http://localhost:3000으로 접속하면 사용자 프로필을 로드하는 간단한 애플리케이션이 실행됩니다. 사용자 ID를 기반으로 데이터를 로드하며, 로딩 상태와 오류 처리를 시각적으로 확인할 수 있습니다.
4. 이제 애플리케이션을 실행하여 사용자 프로필 기능을 테스트해 봅시다.

   

   Redux Toolkit의 createAsyncThunk 를 사용한 워크플로우

요약

• createAsyncThunk를 사용하여 비동기 작업을 간소화하고, 상태 관리가 더욱 직관적으로 이루어집니다.
• configureStore를 사용하여 Redux DevTools와 미들웨어 설정을 자동으로 처리합니다.
• useSelector와 useDispatch를 사용하여 컴포넌트에서 상태를 관리하고 비동기 액션을 처리합니다.

이 포스팅을 통해 Redux Toolkit을 사용한 비동기 작업 관리와 애플리케이션 통합 과정을 배웠습니다. 추가적인 질문이나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요!