🗃️ Redux 제대로 이해하기 - Store, Action, Reducer, Dispatch

1. Redux란?

Redux는 자바스크립트 애플리케이션의 상태를 관리하기 위한 오픈 소스 라이브러리이다. 주로 리액트와 함께 사용되지만 리액트에 의존하지 않기 때문에 다른 프레임워크나 바닐라 자바스크립트에서도 사용할 수 있다.

리액트 애플리케이션의 규모가 커질수록 컴포넌트 간 데이터 전달이 복잡해질 수 있으며 부모 컴포넌트에서 자식 컴포넌트로 여러 단계에 걸쳐 props를 전달해야 하는 현상을 Props Drilling이라고 한다.

Redux는 이러한 문제를 해결하기 위해 전역 상태를 하나의 저장소에서 관리하도록 설계되었다.

[Redux의 3대 원칙]

• 단일 출처의 진실 (Single Source of Truth)
  애플리케이션의 모든 상태는 하나의 저장소(Store)에 하나의 객체 트리 형태로 저장된다.
• 상태는 읽기 전용 (State is Read-Only)
  상태를 직접 변경할 수 없으며 상태를 변경하기 위해서는 반드시 액션(Action) 객체를 디스패치(Dispatch)해야 한다.
• 순수 함수를 통한 변화 (Changes are made with Pure Functions)
  상태가 어떻게 변경되는지를 정의하기 위해 리듀서(Reducer)라는 순수 함수를 작성하며 리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환한다.

2. Redux의 핵심 구성요소 

- Action

Action은 상태 변화가 필요하다는 사실을 설명하는 객체이다. 리덕스에서 상태를 변경하기 위해서는 반드시 Action 객체를 전달해야 하며 Action은 항상 type이라는 필수 속성을 가진다. 또한 필요에 따라 payload와 같은 추가 데이터를 포함할 수 있다.

const incrementAction = {
  type: 'INCREMENT',
  payload: 1
};

이 Action 객체는 dispatch 함수를 통해 전달되며 리덕스의 상태 변경 과정에 사용된다.

- Dispatch

Dispatch는 Action을 store에 전달하는 함수다. 컴포넌트 내부에서 dispatch()를 호출하면 Action이 store로 전달되고 reducer가 이를 처리하여 상태가 업데이트된다.

리액트에서 리덕스를 사용할 때는 react-redux 라이브러리의 useDispatch와 useSelector 훅을 사용하여 상태를 관리할 수 있다.

import { useDispatch, useSelector } from "react-redux";

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.counter.value);
  
  const incrementAction = {
    type: 'INCREMENT',
    payload: 1
  };
  
  const handleClick = () => {
    dispatch(incrementAction);
  };
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleClick}>+1 증가</button>
    </div>
  );
};

export default Counter;

useDispatch는 리덕스 store에 액션을 전달하기 위한 dispatch 함수를 반환하며 useSelector는 store에 저장된 상태를 조회할 때 사용된다.

버튼을 클릭하면 handleClick 함수가 실행되고 dispatch(incrementAction)을 통해 액션이 store로 전달된다. 이후 reducer가 액션의 type을 확인하여 상태를 변경하고 변경된 상태가 다시 컴포넌트에 반영된다.

- Reducer

Reducer는 현재 상태(state)와 액션을 받아 새로운 상태를 반환하는 순수 함수이다. 리덕스에서는 상태를 직접 수정하지 않고 항상 새로운 상태 객체를 반환하는 방식으로 상태 변경을 관리한다.

Reducer는 액션의 type에 따라 상태를 어떻게 변경할지 정의한다.

const counterReducer = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + action.payload };
      
    default:
      return state;
  }
};

INCREMENT 액션이 전달되면 기존 상태의 value에 payload 값을 더한 새로운 상태를 반환한다.

참고) 위 코드에서 state = { value: 0 }은 reducer의 초기 상태를 의미한다. 리덕스는 처음 실행될 때 reducer를 호출하여 초기 상태를 설정한다.

- Store

Store는 애플리케이션의 전체 상태(state)를 저장하는 객체이다. 일반적으로 하나의 애플리케이션에는 하나의 store를 사용하며 이 store는 애플리케이션의 모든 컴포넌트에서 공유된다.

리덕스에서는 createStore() 함수를 사용하여 store를 생성할 수 있으며 여러 리듀서를 하나로 합치기 위해 combineReducers()를 사용할 수 있다.

import { createStore, combineReducers } from "redux";
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
    counter: counterReducer  
});

const store = createStore(rootReducer);

export default store;

위 코드에서는 counterReducer를 counter 상태를 관리하는 reducer로 등록하였다. store는 애플리케이션의 전체 상태를 저장하며 리액트 컴포넌트들이 상태를 공유할 수 있도록 한다.

리액트 애플리케이션에서 Redux store를 사용하기 위해서는 Provider로 App 컴포넌트를 감싸서 store를 전달해야 한다.

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import Counter from "./Counter";

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Provider store={store}>
    <Counter />
  </Provider>
);

Provider는 리액트 컴포넌트 트리 전체에 Redux store를 전달하여 하위 컴포넌트들이 리덕스 상태에 접근할 수 있도록 한다.

3. Redux Toolkit

Redux Toolkit은 리덕스를 더 쉽고 효율적으로 사용할 수 있도록 리덕스 공식 팀에서 제공하는 상태 관리 도구 모음이다. 기존 리덕스는 store 설정, reducer 작성, action 생성 과정에서 반복적인 코드가 많이 발생하는 단점이 있었지만 Redux Toolkit은 이러한 문제를 해결하여 개발 생산성을 향상시킨다.

Redux Toolkit의 주요 변경점

1. Store 설정 간소화
기존 리덕스에서는 createStore()를 사용하여 store를 생성했지만 Redux Toolkit에서는 configureStore()를 사용하여 store를 설정한다.

configureStore()는 Redux DevTools를 자동으로 지원하며 middleware가 기본적으로 포함되어 있어 별도의 설정이 필요하지 않다.

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

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

export default store;

2. Reducer 작성 방식 개선
기존 리덕스에서는 switch문을 사용하여 reducer를 작성했지만 Redux Toolkit에서는 createSlice()를 사용하여 reducer와 action을 동시에 정의할 수 있다.

또한 내부적으로 Immer 라이브러리를 사용하여 상태를 직접 수정하는 것처럼 코드를 작성해도 불변성이 자동으로 유지된다.

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

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

3. Action 생성 자동화
Redux Toolkit은 reducer를 기반으로 action creator를 자동으로 생성한다. 따라서 개발자가 직접 action 객체를 작성할 필요가 줄어들어 코드가 간결해진다.

import { increment } from "./counterSlice";
import { useDispatch } from "react-redux";

const dispatch = useDispatch();

dispatch(increment(1));