Redux Toolkit 활용(1강): Redux Toolkit 소개 및 설치

1. Redux Toolkit 소개 및 설치

안녕하세요! 이번 포스팅에서는 Redux Toolkit을 소개하고 설치하는 방법에 대해 다뤄보겠습니다. Redux와 Redux Toolkit은 둘 다 React 애플리케이션의 상태 관리를 도와주는 도구인데요, Redux의 복잡한 초기 설정을 해결하고, 코드의 간소화를 도와주는 Redux Toolkit의 장점에 대해 알아보겠습니다. 이 포스팅을 통해 여러분은 Redux Toolkit을 사용해 React 애플리케이션의 상태 관리를 어떻게 최적화할 수 있는지 이해할 수 있을 것입니다.

React 프로젝트를 작업하는 장면

Redux와 Redux Toolkit의 차이점

Redux는 애플리케이션의 전역 상태를 관리하기 위해 설계된 강력한 도구입니다. 하지만 초기 설정이 다소 복잡하고, 다양한 설정 파일을 따로 관리해야 한다는 점이 단점으로 꼽히곤 합니다. 이러한 점에서 Redux Toolkit은 Redux의 공식 툴킷으로, 초기 설정과 복잡한 작업을 간소화하여 상태 관리를 더 쉽게 만들어줍니다.

Redux Toolkit이 해결하는 주요 문제는 다음과 같습니다:

• 설정 간소화: configureStore와 createSlice와 같은 API를 제공하여 복잡한 설정을 간소화합니다.
• 성능 개선: 불필요한 리렌더링을 줄여 성능을 개선합니다.
• 비동기 처리: createAsyncThunk를 사용해 비동기 작업을 쉽게 처리할 수 있습니다.

이제 Redux Toolkit을 사용해 프로젝트를 시작하는 방법을 살펴보겠습니다!

실습: 프로젝트 생성 및 Redux Toolkit 설치

이제부터 Redux Toolkit을 실습에 적용해 볼 텐데요, 간단한 React 프로젝트를 생성하고 Redux Toolkit을 설치해 보겠습니다.

1. 프로젝트 생성하기

먼저, 새로운 React 프로젝트를 생성합니다. 터미널을 열고 다음 명령어를 실행하세요.

npx create-react-app my-redux-toolkit-app

위 명령어는 새로운 React 애플리케이션을 만듭니다. my-redux-toolkit-app은 여러분이 원하는 이름으로 변경할 수 있습니다.

2. Redux Toolkit 설치하기

프로젝트 폴더로 이동한 다음, Redux Toolkit과 react-redux를 설치합니다.

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

이 명령어는 Redux Toolkit과 React 컴포넌트에서 Redux 상태를 사용할 수 있도록 도와주는 react-redux 패키지를 설치합니다.

3. 프로젝트 구조 설정하기

이제 Redux Toolkit을 활용할 기본 프로젝트 구조를 설정해보겠습니다. 다음과 같은 폴더와 파일을 생성합니다.

• app/store.js: Redux store를 설정하는 파일입니다.
• features/counter/counterSlice.js: 상태와 리듀서를 정의하는 파일입니다.

프로젝트 파일 구조

이제 각각의 파일에 내용을 채워보겠습니다.

4. store.js 파일 설정하기

configureStore를 사용해 Redux store를 설정합니다. 여기서 counterReducer는 이후에 정의할 카운터 상태 관리용 리듀서입니다.

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

5. counterSlice.js 파일 설정하기

createSlice를 사용해 카운터 상태를 관리하는 슬라이스를 정의합니다. increment, decrement, incrementByAmount 액션을 생성하여 상태를 변경할 수 있습니다.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

6. index.js에서 스토어 연결하기

Provider 컴포넌트를 사용해 Redux store를 React 애플리케이션에 연결합니다. 이를 통해 모든 하위 컴포넌트에서 Redux 상태에 접근할 수 있습니다.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

마무리

이번 포스팅에서는 Redux Toolkit을 소개하고 설치하는 방법에 대해 다뤄보았습니다. Redux의 복잡한 설정 과정을 Redux Toolkit을 통해 얼마나 간단히 해결할 수 있는지 확인하셨을 것입니다. 다음 포스팅에서는 초기 설정의 복잡성을 해결하는 과정을 더 자세히 살펴보겠습니다.

Redux Toolkit을 통해 React 상태 관리를 더욱 쉽게 시작해 보세요! 여러분도 직접 프로젝트에 적용해 보면서 Redux Toolkit의 편리함을 체험해 보시기 바랍니다.

Redux Toolkit을 통해 React 상태 관리를 더욱 쉽게 시작해 보세요! 다음 강의에서는 더 실질적인 예제로 Redux Toolkit의 강력함을 체험해 보도록 하겠습니다.