Redux 마스터(1): Redux의 세 가지 핵심 요소

Redux의 세 가지 핵심 요소

Redux의 세 가지 핵심 요소인 Action, Reducer, Store의 흐름

1. Action
   • Action은 상태에 어떤 변화가 일어나야 하는지를 설명하는 객체입니다. 말 그대로 "무슨 일"이 일어났는지를 정의합니다. Action 객체는 최소한 type 속성을 가져야 하며, 상태 변경에 필요한 데이터를 담을 수 있습니다.

     const incrementAction = {
       type: 'INCREMENT', // 액션의 종류를 나타냅니다.
     };
     const decrementAction = {
       type: 'DECREMENT',
     };

      
2. Reducer
   • Reducer는 Action에 따라 상태를 어떻게 변화시킬지를 결정하는 함수입니다. 이전 상태와 Action을 인자로 받아, 새로운 상태를 반환합니다. 상태는 항상 불변성을 유지하며, Reducer는 이를 위해 새로운 상태 객체를 반환합니다.
     

     const initialState = { count: 0 };
     
     function counterReducer(state = initialState, action) {
       switch (action.type) {
         case 'INCREMENT':
           return { count: state.count + 1 };
         case 'DECREMENT':
           return { count: state.count - 1 };
         default:
           return state;
       }
     }

      
3. Store
   • Store는 애플리케이션의 전역 상태를 관리하는 객체입니다. Store는 현재 상태를 저장하고 있으며, 이를 구독할 수 있고, 상태를 변경할 수 있는 유일한 장소입니다. Store는 createStore 함수로 생성됩니다.
   • 예시:

     const initialState = { count: 0 };
     
     function counterReducer(state = initialState, action) {
       switch (action.type) {
         case 'INCREMENT':
           return { count: state.count + 1 };
         case 'DECREMENT':
           return { count: state.count - 1 };
         default:
           return state;
       }
     }

---

Redux가 필요한 이유

상태 관리가 복잡해지는 이유는 애플리케이션 규모가 커지면서, 여러 컴포넌트 간에 상태를 일관되게 전달하고 업데이트하는 것이 어려워지기 때문입니다. React 자체는 컴포넌트 간 상태 전달이 가능하지만, 여러 단계의 컴포넌트를 거쳐 상태를 전달해야 할 경우, 코드가 복잡해지고 오류 가능성이 높아집니다.

Redux는 애플리케이션의 상태를 하나의 전역 Store에서 관리하고, 모든 컴포넌트가 이 상태에 접근할 수 있도록 도와줍니다. 이를 통해 상태 변경이 일관되게 관리되고, 상태 흐름이 예측 가능해집니다.

---

Redux 기본 구조 예제

다음 예제에서는 Redux의 기본 요소인 Action, Reducer, Store를 사용하여 간단한 카운터 기능을 구현해 보겠습니다.

1. Action 정의

Action은 상태가 어떻게 변해야 하는지를 나타내므로, 증가와 감소를 위한 Action을 정의합니다.

const increment = () => {
  return { type: 'INCREMENT' };
};

const decrement = () => {
  return { type: 'DECREMENT' };
};

2. Reducer 정의

Reducer는 Action에 따라 상태를 변화시킵니다. 카운터의 기본 값은 0으로 설정하고, INCREMENT와 DECREMENT Action을 처리합니다.

const initialState = { count: 0 };

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

3. Store 생성

Store는 Redux의 상태를 관리하는 중앙집중식 장소입니다. Redux의 createStore 함수를 사용하여 Store를 생성합니다.

import { createStore } from 'redux';

const store = createStore(counterReducer);

store.subscribe(() => console.log(store.getState()));

4. 상태 변경 테스트

이제 Action을 통해 상태를 변경해 봅시다. dispatch를 사용하여 Store에 Action을 전달합니다.

store.dispatch(increment()); // { count: 1 }
store.dispatch(increment()); // { count: 2 }
store.dispatch(decrement()); // { count: 1 }

이렇게 기본적인 Redux 구조를 통해 상태를 관리하고, 상태 변화를 명확하게 추적할 수 있습니다.

---

Redux의 데이터 흐름

Redux에서 상태 관리의 기본 흐름은 다음과 같습니다:

1. Action 생성: 상태를 변경하기 위한 Action을 생성합니다.
2. Action 디스패치: Action을 dispatch 함수로 Store에 전달합니다.
3. Reducer 호출: Store는 Reducer를 호출하여 Action에 따라 새로운 상태를 생성합니다.
4. 상태 업데이트: Reducer가 반환한 새로운 상태로 Store가 업데이트됩니다.

---

결론

Redux의 기본 개념과 구조는 매우 단순하지만, 큰 애플리케이션에서 상태 관리를 일관되게 하기 위해 필수적입니다. Redux의 Action, Reducer, Store라는 세 가지 핵심 요소를 이해하면 애플리케이션 상태를 체계적으로 관리할 수 있습니다. 다음 단계에서는 Redux를 실제 React 프로젝트에 적용하는 방법을 배울 예정입니다.