마스터Redux Toolkit 활용 실습(3): 호환성 개선 실습

Redux Toolkit을 사용한 호환성 개선: 설치부터 실행까지

이번 포스팅에서는 Redux Toolkit을 사용하여 React와 Redux 간의 호환성을 어떻게 개선할 수 있는지 알아보겠습니다. 실습을 통해 애플리케이션을 처음부터 구축하고, 모든 설정 과정을 자세히 설명하겠습니다.

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

먼저, Redux Toolkit을 사용할 React 애플리케이션을 생성하고 필요한 패키지를 설치합니다.

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

위 명령어를 사용하여 my-redux-toolkit-app이라는 이름의 React 애플리케이션을 생성한 후, Redux Toolkit과 React-Redux를 설치합니다.

2. 전체 폴더 구조

애플리케이션의 전체 폴더 구조는 다음과 같습니다:

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

3. createSlice와 createAsyncThunk로 상태 관리 간소화

createSlice와 createAsyncThunk를 사용하여 상태 관리와 비동기 작업을 간소화합니다. createSlice를 사용하여 리듀서와 액션을 한 번에 정의하고, 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',
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
  },
  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) => {
        state.status = 'failed';
      });
  },
});

export const { login, logout } = userSlice.actions;
export default userSlice.reducer;

4. Redux Store 생성

이제 Redux Store를 생성하여 애플리케이션에 상태 관리를 추가합니다.

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;

configureStore를 사용하여 스토어를 설정하고, userReducer를 등록합니다.

5. React 컴포넌트에서 상태 사용하기

React 컴포넌트에서 useSelector와 useDispatch를 사용하여 Redux 상태를 쉽게 접근하고 액션을 디스패치할 수 있습니다. 이는 기존의 connect를 사용하는 방법보다 코드가 간결하고 직관적입니다.

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

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

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

  const handleLogin = () => {
    const userInfo = { name: 'John Doe', email: 'john.doe@example.com' };
    dispatch(login(userInfo));
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      {user ? (
        <div>
          <h2>Welcome, {user.name}!</h2>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

export default UserProfile;

6. 스토어를 애플리케이션에 제공하기

이제 Provider를 사용하여 Redux 스토어를 애플리케이션에 제공해야 합니다. 이를 통해 모든 컴포넌트에서 Redux 상태에 접근할 수 있습니다.

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>
);

7. App 컴포넌트에서 UserProfile 사용하기

UserProfile 컴포넌트를 App 컴포넌트에 추가하여 사용자 인터페이스를 완성합니다.

• 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 Compatibility App</h1>
        <UserProfile />
      </div>
    );
  }
  
  export default App;

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

이제 애플리케이션을 실행하여 Redux Toolkit을 사용한 상태 관리를 테스트해 봅시다.

npm start

브라우저에서 http://localhost:3000으로 접속하면 간단한 사용자 관리 애플리케이션이 실행됩니다. 로그인 및 로그아웃 버튼을 사용하여 상태가 변경되는 것을 확인할 수 있습니다.

React와 Redux 간의 호환성을 Redux Toolkit을 사용해 개선

요약

• Redux Toolkit을 사용하여 React와 Redux 간의 호환성을 크게 개선할 수 있었습니다.
• createSlice와 createAsyncThunk를 사용하여 상태 관리와 비동기 작업을 간소화하고, useSelector와 useDispatch로 컴포넌트에서 상태를 쉽게 관리할 수 있었습니다.
• Provider를 통해 스토어를 애플리케이션에 제공하여 모든 컴포넌트에서 상태를 접근할 수 있도록 했습니다.

이 포스팅을 통해 Redux Toolkit을 사용하여 React와 Redux 간의 호환성을 개선하고, 더 효율적인 상태 관리를 구현하는 방법을 배우셨길 바랍니다. 추가적인 질문이나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요!