React 애플리케이션의 핵심, Redux로 상태 관리 마스터하기 🚀

점점 복잡해지는 웹 애플리케이션 개발에서 '상태 관리' 는 개발자들에게 항상 중요한 도전 과제로 다가옵니다. 특히 React와 같은 컴포넌트 기반 라이브러리에서는 여러 컴포넌트가 데이터를 공유하고 상호작용하면서 상태가 꼬이거나 예측 불가능해지는 상황에 직면하기 쉽죠. 이러한 난관을 해결하고 애플리케이션의 안정성과 유지보수성을 높이는 강력한 도구가 바로 'Redux' 입니다.

이번 블로그 포스팅에서는 예측 가능한 JavaScript 앱을 위한 상태 컨테이너, Redux에 대해 깊이 있게 탐구하고, 어떻게 React 애플리케이션에 통합하여 효율적인 상태 관리를 구현할 수 있는지 알아보겠습니다.

---

728x90

Redux란 무엇이며 왜 필요한가?

Redux는 애플리케이션의 상태를 보다 구조화된 방식으로 관리하는 데 도움을 주는 라이브러리입니다. React 생태계에서 특히 널리 사용되지만, React에만 국한되지 않고 모든 JavaScript 애플리케이션에서 활용될 수 있습니다. Redux가 중요한 이유는 다음과 같습니다.

• 단방향 데이터 흐름: Redux는 단방향 데이터 흐름 패턴을 따릅니다. 이는 애플리케이션의 상태가 한 방향으로만 흘러간다는 것을 의미하며, 데이터가 어떻게 변하는지 쉽게 추적하고 이해할 수 있게 합니다.
• 중앙 집중식 상태: 애플리케이션의 모든 상태와 로직을 하나의 중앙 저장소(Store)에 집중시켜 관리합니다. 이는 상태를 추적하고 변경하는 과정을 훨씬 용이하게 만듭니다.
• 예측 가능한 상태 변화: Redux의 핵심 원칙 중 하나는 상태 변화를 예측 가능하게 만드는 것입니다. 이를 통해 디버깅과 테스트가 훨씬 수월해집니다.

복잡한 애플리케이션일수록 Redux의 가치는 더욱 빛을 발합니다. 여러 컴포넌트가 복잡하게 얽혀 데이터를 주고받을 때, Redux는 명확한 규칙과 구조를 제공하여 혼란을 방지하고 개발 생산성을 향상시킵니다.

---

Redux의 핵심 개념: Store, Actions, Reducers

Redux를 이해하는 데 있어 가장 중요한 세 가지 핵심 개념은 Store, Actions, 그리고 Reducers입니다. 이 세 가지 요소가 유기적으로 상호 작용하며 Redux의 상태 관리 시스템을 구성합니다.

1. Store: 애플리케이션의 단 하나의 진실의 원천

Store는 Redux 애플리케이션의 전체 상태 트리를 담고 있는 객체입니다. 애플리케이션의 모든 상태를 포함하는 하나의 거대한 객체와 같다고 생각할 수 있습니다. Store는 다음의 중요한 역할을 수행합니다.

• 애플리케이션의 상태를 보관합니다.
• getState() 메서드를 통해 상태에 접근할 수 있도록 합니다.
• dispatch(action) 메서드를 통해 상태를 변경할 수 있도록 합니다.
• subscribe(listener) 메서드를 통해 리스너를 등록하여 상태 변화를 구독할 수 있도록 합니다.

Store는 애플리케이션 내에서 '단 하나의 진실의 원천(single source of truth)' 역할을 수행하며, 모든 상태 변화는 이 Store를 통해서만 이루어집니다.

2. Actions: 어떤 일이 발생했는지 설명하는 객체

Actions는 애플리케이션에서 어떤 일이 발생했는지 (예: 아이템 추가, 아이템 제거, 값 증가 등)를 설명하는 일반 JavaScript 객체입니다. 상태를 변경하려는 의도를 표현하는 최소한의 정보 단위라고 볼 수 있습니다.

• 각 액션은 수행되는 액션의 유형을 나타내는 type 속성을 반드시 포함해야 합니다. 이 type은 일반적으로 문자열 상수로 정의됩니다(예: "INCREMENT", "DECREMENT", "ADD_TODO").
• 액션은 상태를 변경하는 방법을 직접적으로 명시하지 않습니다. 단지 '무엇이' 일어났는지만을 설명합니다.

액션은 애플리케이션 내에서 발생하는 모든 이벤트의 기록과 같으며, 이 기록은 애플리케이션의 상태 변화 과정을 이해하고 디버깅하는 데 매우 유용합니다.

3. Reducers: 상태를 변경하는 순수 함수

Reducers는 현재 상태와 액션을 인수로 받아 새로운 상태를 반환하는 '순수 함수' 입니다. Reducer는 Store로 전달된 액션에 대한 응답으로 애플리케이션의 상태가 어떻게 변경되어야 하는지를 결정하는 역할을 합니다.

• 순수 함수: Reducer는 항상 동일한 입력에 대해 동일한 출력을 반환해야 하며, 외부 상태를 변경하거나 부작용을 일으켜서는 안 됩니다. 이는 Redux의 예측 가능성을 보장하는 핵심 원칙입니다.
• 불변성: Reducer는 현재 상태를 직접 변경하지 않고, 항상 새로운 상태 객체를 반환해야 합니다. 기존 상태 객체를 복사한 후 필요한 부분만 변경하여 새로운 객체를 생성하는 방식을 사용합니다.

Reducers는 switch 문을 사용하여 액션의 type에 따라 다른 상태 변화 로직을 구현하는 것이 일반적입니다.

---

Redux 데이터 흐름과 간단한 카운터 예제

Redux의 개념들이 어떻게 함께 작동하는지 이해하기 위해, 사용자가 카운트 값을 증가시키거나 감소시킬 수 있는 간단한 카운터 애플리케이션을 예로 들어보겠습니다.

1. 액션 생성

먼저 상태 변화의 의도를 나타내는 액션을 정의합니다.

// 액션 유형 정의
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 액션 생성자 (Action Creators) 생성
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

2. 리듀서 생성

초기 상태와 액션을 기반으로 새로운 상태를 계산하는 리듀서 함수를 작성합니다.

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; // 알 수 없는 액션은 현재 상태를 반환
  }
};

3. Store 생성

Redux의 createStore 함수를 사용하여 위에서 정의한 리듀서를 바탕으로 Store를 생성합니다.

import { createStore } from 'redux';

const store = createStore(counterReducer);

4. React 컴포넌트에서 Store 사용

React 컴포넌트를 Redux에 연결하기 위해 react-redux 라이브러리의 도움을 받습니다.

A. Provider로 앱 감싸기

react-redux의 Provider 컴포넌트를 사용하여 애플리케이션의 최상위 컴포넌트를 감싸면, 중첩된 모든 컴포넌트가 Redux Store에 접근할 수 있게 됩니다.

import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

B. 훅을 사용하여 컴포넌트 연결

useSelector 훅을 사용하여 Redux Store의 상태를 선택하고, useDispatch 훅을 사용하여 액션을 디스패치할 수 있습니다.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.count); // Redux Store의 상태에서 'count'를 선택
  const dispatch = useDispatch(); // 액션을 디스패치하기 위한 함수

  return (
    <div>
      <h1>{count}</h1>
      {/* 버튼 클릭 시, 액션 생성자를 통해 액션을 만들고 dispatch 함수를 호출 */}
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

이 과정을 통해 사용자가 버튼을 클릭하면, 해당 액션이 디스패치(Dispatch)되고, 리듀서가 이 액션을 받아 새로운 상태를 계산하여 Store를 업데이트합니다. Store가 업데이트되면, Store를 구독하고 있는 React 컴포넌트가 새로운 상태를 받아 UI를 다시 렌더링하게 됩니다. 이것이 Redux의 단방향 데이터 흐름의 핵심입니다.

Redux는 복잡한 React 애플리케이션에서 상태 관리에 명확한 구조와 예측 가능성을 제공하는 강력한 도구입니다. Redux의 핵심 원칙을 이해하고 react-redux 훅을 활용하여 효율적인 상태 관리 마스터에 도전해 보세요! 💪