프론트엔드 노트

프론트엔드 개발에서 상태 관리는 애플리케이션의 기능성과 사용자 경험에 큰 영향을 미칩니다. 특히, 상태 관리 라이브러리인 Redux는 복잡한 애플리케이션에서 상태를 효율적으로 관리하는 데 유용합니다. Redux Toolkit은 Redux를 더 쉽게 사용할 수 있게 해주는 도구로, 상태 관리의 생산성을 크게 향상시킵니다. 이번 글에서는 Redux Toolkit을 활용한 효율적인 상태 관리 방법에 대해 알아보겠습니다.

Redux Toolkit 소개

Redux Toolkit은 Redux 애플리케이션을 만드는 데 필요한 필수 도구와 패턴을 제공합니다. 이 도구는 복잡한 설정 과정을 간소화하고, 보일러플레이트 코드를 줄이며, 상태 관리의 일관성을 유지하는 데 도움을 줍니다.

Redux Toolkit 설치

Redux Toolkit을 사용하기 위해서는 먼저 패키지를 설치해야 합니다. npm 또는 yarn을 사용하여 간단하게 설치할 수 있습니다.

npm install @reduxjs/toolkit react-redux

또는

yarn add @reduxjs/toolkit react-redux

Redux Slice 만들기

Redux Toolkit에서는 "슬라이스"라는 개념을 사용하여 상태와 리듀서를 관리합니다. 슬라이스는 상태의 조각을 나타내며, 해당 조각과 관련된 액션과 리듀서를 관리합니다.

다음은 슬라이스를 만드는 예제입니다.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  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;

위 코드에서 createSlice 함수를 사용하여 슬라이스를 만들었습니다. initialState를 통해 초기 상태를 정의하고, reducers를 통해 상태를 변경하는 여러 액션을 정의했습니다.

Redux Store 설정

슬라이스를 만든 후에는 Redux Store를 설정해야 합니다. 다음은 Store 설정의 예입니다.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

export default store;

configureStore 함수를 사용하여 스토어를 생성하고, 슬라이스에서 만든 리듀서를 등록합니다.

Provider로 연결하기

React 애플리케이션에서 Redux Store를 사용하기 위해서는 Provider로 애플리케이션을 감싸야 합니다. 이는 Redux의 스토어를 React 컴포넌트에 연결해 주는 역할을 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

상태와 액세스하기

이제 상태를 읽고 업데이트하는 React 컴포넌트를 만들어 보겠습니다. useSelector와 useDispatch 훅을 사용하여 상태를 가져오고, 액션을 디스패치할 수 있습니다.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>증가</button>
      <button onClick={() => dispatch(decrement())}>감소</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>5만큼 증가</button>
    </div>
  );
};

export default Counter;

useSelector를 통해 스토어의 상태를 읽고, useDispatch를 통해 액션을 디스패치합니다. 이를 통해 사용자 인터페이스에서 상태의 변화를 쉽게 관리할 수 있습니다.

마무리

이번 글에서는 Redux Toolkit을 활용한 효율적인 상태 관리 방법에 대해 살펴보았습니다. 슬라이스와 스토어 설정, React 컴포넌트와의 연결 과정을 통해 Redux의 기본적인 사용법을 익힐 수 있었습니다. Redux Toolkit은 복잡한 상태 관리를 간소화해 주는 강력한 도구입니다. 프론트엔드 개발에서 상태 관리를 더욱 쉽게 하고 싶다면 Redux Toolkit을 활용해 보시기 바랍니다.

효율적인 상태 관리를 위한 Redux Toolkit 활용법