Redux 상태 관리 기본 사용법 정리

현대 웹 애플리케이션의 복잡성이 증가함에 따라 효과적인 상태 관리가 필수적으로 요구됩니다. 이때 Redux가 자주 사용되는 도구 중 하나로, 전역 상태를 체계적으로 관리하고 일관된 데이터 흐름을 제공합니다. 본 게시글에서는 Redux의 기초적인 사용법에 대해 자세히 알아보도록 하겠습니다.

Redux란 무엇인가?

Redux는 자바스크립트 애플리케이션에서 데이터를 예측 가능한 방식으로 관리하기 위한 상태 관리 라이브러리입니다. 이 라이브러리를 통해 예상치 못한 데이터 변화를 방지하고, 여러 환경에서 일관된 동작을 보장할 수 있습니다. Redux는 앱의 상태를 하나의 저장소(store) 안에 둡니다. 상태를 변경하고자 할 경우, 액션(action)이라고 불리는 객체를 발생시키고, 이를 통해 리듀서(reducer)가 새로운 상태를 계산하게 됩니다.

Redux의 기본 구성 요소

• 스토어(Store): 애플리케이션의 상태를 저장하는 객체입니다.
• 액션(Action): 상태의 변화를 설명하는 객체로, 무엇이 일어났는지를 나타냅니다.
• 리듀서(Reducer): 현재 상태와 액션을 기반으로 새 상태를 반환하는 순수 함수입니다.

Redux 설치하기

Redux를 사용하기 위해서는 먼저 필요한 패키지를 설치해야 합니다. 일반적으로 Create React App을 사용하여 프로젝트를 생성한 후, Redux 및 React-Redux 라이브러리를 설치하는 것이 좋습니다. 아래 명령어를 통해 설치할 수 있습니다.

$ npx create-react-app my-app --template redux

$ cd my-app

$ npm install redux react-redux

카운터 애플리케이션 구현하기

이제 간단한 카운터 애플리케이션을 구현해보겠습니다. 이 과정에서는 Redux의 기본 개념과 함께 State Management를 경험할 수 있습니다.

모듈 설정하기

우선, 카운터 모듈을 만드는 것부터 시작하겠습니다. ‘modules’라는 디렉터리를 생성하고, 그 안에 ‘counter.ts’ 파일을 생성합니다. 이곳에 필요한 액션 타입과 리듀서를 정의할 것입니다.

// 액션 타입 정의
const INCREMENT = 'counter/INCREMENT';
const DECREMENT = 'counter/DECREMENT';
// 액션 생성자 정의
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
// 초기 상태 설정
const initialState = { count: 0 };
// 리듀서 정의
const counter = (state = initialState, action) => {
 switch (action.type) {
  case INCREMENT:
   return { count: state.count + 1 };
  case DECREMENT:
   return { count: state.count - 1 };
  default:
   return state;
 }
};
export default counter;

스토어 만들기

이제 스토어를 생성하고, 애플리케이션에 Redux를 적용해야 합니다. 다음 단계로 ‘index.tsx’ 파일에서 스토어를 설정하겠습니다.

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
const store = createStore(rootReducer);
ReactDOM.render(
 
  
 ,
 document.getElementById('root')
);

Redux Toolkit 활용하기

최근에는 Redux Toolkit이 권장되는 사용 방법으로 떠오르고 있습니다. Redux Toolkit은 Redux 로직을 더욱 간편하게 작성할 수 있는 유틸리티를 제공합니다. 신규 프로젝트를 구축하는 경우, Redux Toolkit을 활용하는 것을 강력히 권장합니다.

Redux Toolkit 설치

Redux Toolkit을 설치하려면 다음 명령어를 사용합니다.

$ npm install @reduxjs/toolkit

Slice 생성하기

Redux Toolkit에서는 ‘slice’를 만들어 리듀서와 액션 생성자를 간편하게 설정할 수 있습니다.

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
 name: 'counter',
 initialState: { count: 0 },
 reducers: {
  increment: (state) => { state.count += 1; },
  decrement: (state) => { state.count -= 1; },
 },
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

결론

Redux는 복잡한 애플리케이션의 상태를 관리하는 데 있어 큰 도움이 됩니다. 기본 개념을 이해하고, Redux Toolkit을 활용하여 코드를 간결하게 유지하는 방식으로 개발을 진행할 수 있습니다. Redux를 통해 더욱 구조적이고 유지 보수하기 쉬운 애플리케이션을 구축해보세요.

다양한 상태 관리 도구가 존재하는 현 시점에서, Redux는 그 명확한 설계 철학과 예측 가능한 상태 관리를 제공하여 여전히 많은 개발자에게 선택받고 있습니다. Redux를 사용하여 사용자 경험을 더욱 향상시키는 방법을 찾아보시기 바랍니다.

자주 묻는 질문과 답변