Redux: React에서 상태 관리를 효율적으로 하는 방법과 사용 사례

Redux: React에서 상태 관리를 효율적으로 하는 방법과 사용 사례

Redux는 React 애플리케이션에서 상태 관리를 체계적으로 하기 위한 라이브러리입니다. 대규모 애플리케이션에서는 컴포넌트 간 상태 공유가 복잡해질 수 있는데, Redux는 전역 상태를 관리하여 이러한 복잡성을 해결합니다. 이번 글에서는 Redux의 개념과 React에서의 사용 방법을 실제 사례 중심으로 설명하겠습니다.

Redux: React에서 상태 관리

---

1. Redux의 개념

Redux는 전역 상태 관리를 위한 라이브러리입니다. 이를 통해 컴포넌트 간 상태를 일관성 있게 관리하고, 애플리케이션의 상태를 예측 가능한 구조로 유지할 수 있습니다. Redux는 다음과 같은 세 가지 원칙을 기반으로 동작합니다:

1. 단일 상태 트리: 애플리케이션의 전체 상태가 하나의 객체 트리 안에 저장됩니다. 이로 인해 상태를 쉽게 추적하고 관리할 수 있습니다.
2. 불변 상태: Redux에서 상태는 불변입니다. 즉, 상태를 직접 수정하는 대신, 새로운 상태 객체를 반환하는 방식으로 상태가 업데이트됩니다.
3. 순수 함수인 리듀서: 상태 변화는 리듀서라는 순수 함수를 통해 처리됩니다. 이 함수는 이전 상태와 액션을 받아 새로운 상태를 반환하는 역할을 합니다.

---

2. Redux의 주요 구성 요소

Redux는 네 가지 주요 구성 요소로 구성됩니다:

• Store: 애플리케이션의 전역 상태를 저장하는 곳입니다. 한 애플리케이션에 하나의 Store만 존재합니다.
• Action: 상태를 변경하기 위한 명령입니다. 액션은 어떤 상태가 어떻게 변경되어야 하는지를 설명하는 객체입니다.
• Reducer: 상태가 어떻게 변경될지를 정의하는 순수 함수입니다. 액션에 따라 상태를 업데이트합니다.
• Dispatch: 액션을 스토어에 전달하는 메서드입니다. dispatch를 통해 액션이 스토어에 전달되면 리듀서가 호출됩니다.

---

3. Redux 사용 방법: 실습 사례

시나리오: 간단한 카운터 애플리케이션

이 예제에서는 카운터 애플리케이션을 만들며, Redux를 사용해 상태를 관리하겠습니다. 이 애플리케이션은 버튼을 눌러 카운트를 증가시키거나 감소시키는 간단한 기능을 제공합니다.

---

4. Redux 설치 및 설정

Redux 설치

먼저 Redux와 React-Redux를 설치합니다.

npm install redux react-redux

 

스토어 구성

store.js 파일에서 Redux 스토어를 설정합니다. 리듀서를 정의하고 스토어를 생성합니다.

// store.js
import { createStore } from 'redux';

// 초기 상태
const initialState = {
  count: 0
};

// 리듀서 정의
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 스토어 생성
const store = createStore(counterReducer);

export default store;

 

• 초기 상태는 count가 0으로 설정됩니다.
• counterReducer는 액션 타입에 따라 상태를 업데이트하는 리듀서입니다.
• createStore를 사용하여 스토어를 생성합니다.

스토어 제공

애플리케이션에서 Redux를 사용하기 위해 Provider로 애플리케이션을 감쌉니다. index.js 파일에서 Provider를 추가하여 모든 컴포넌트가 스토어에 접근할 수 있도록 합니다.

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

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

---

5. Action과 Dispatch 구현

Action은 상태를 변경하기 위한 명령어입니다. 우리는 INCREMENT와 DECREMENT라는 두 가지 액션을 사용해 카운트를 증가시키거나 감소시킵니다.

카운터 컴포넌트 구현

카운터 애플리케이션에서는 useDispatch를 사용하여 액션을 스토어에 전달하고, useSelector를 통해 스토어의 상태를 읽습니다.

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

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

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
};

export default Counter;

• useSelector: 스토어에서 상태를 읽는 데 사용됩니다. 여기서는 count 값을 가져옵니다.
• useDispatch: 액션을 스토어에 전달하는 데 사용됩니다. 버튼 클릭 시 INCREMENT 또는 DECREMENT 액션을 디스패치합니다.

---

6. 상태 관리 흐름 요약

이제 상태 관리의 흐름을 정리해보겠습니다.

1. UI에서 액션을 디스패치: 사용자가 버튼을 클릭하면 dispatch가 호출되고, 특정 액션(INCREMENT 또는 DECREMENT)이 스토어에 전달됩니다.
2. 리듀서에서 상태 업데이트: 리듀서는 전달된 액션을 바탕으로 상태를 업데이트합니다. 새로운 상태가 리턴되며 스토어에 저장됩니다.
3. 컴포넌트에서 상태 사용: useSelector를 통해 스토어에서 최신 상태를 받아 컴포넌트에서 화면에 렌더링합니다.

이러한 상태 관리 방식 덕분에 애플리케이션의 상태를 예측 가능하고 일관되게 관리할 수 있습니다.

---

7. 결론

Redux는 React 애플리케이션에서 상태 관리의 복잡성을 줄여주는 강력한 도구입니다. 특히, 대규모 애플리케이션에서 컴포넌트 간의 상태 공유가 필수일 때, Redux를 사용하면 상태를 중앙에서 관리하여 코드의 가독성, 유지보수성, 예측 가능성을 크게 향상시킬 수 있습니다.

Redux의 핵심 개념인 액션, 리듀서, 스토어를 이해하고, useSelector와 useDispatch를 통해 상태와 액션을 처리하는 방법을 익히면, 효율적으로 상태를 관리할 수 있습니다.

Redux를 사용한 상태 관리는 애플리케이션의 규모가 커질수록 더 유용해집니다. 상태 변경을 명확히 하고, 상태 추적을 쉽게 만들어줍니다. 따라서 프로젝트의 복잡도가 높아질수록 Redux의 가치를 더 느끼게 될 것입니다.