Redux

Redux는 자바스크립트 애플리케이션의 전역 상태 관리를 위한 라이브러리로, 특히 React와 함께 많이 사용됩니다. Redux는 애플리케이션의 상태를 한 곳에서 중앙 집중적으로 관리하여 상태의 일관성을 유지하고, 상태 변경을 예측 가능하게 만드는 것이 목표입니다.

Redux의 핵심 개념은 "단일 상태 저장소(Single Source of Truth)"로, 모든 상태가 하나의 전역 스토어에 저장되고, 이 스토어를 통해 상태가 관리됩니다. 이 구조는 복잡한 애플리케이션에서도 상태 추적과 디버깅을 용이하게 합니다.

Redux의 핵심 개념

1. 스토어(Store):
   • Redux는 애플리케이션의 모든 상태를 단일 저장소(스토어)에 보관합니다. 이 스토어는 상태를 저장하고 관리하는 중앙 집중적인 역할을 합니다.
   • React 애플리케이션에서는 Provider를 통해 스토어를 하위 컴포넌트에 제공하여 전역 상태에 접근할 수 있게 합니다.
2. 액션(Action):
   • 액션은 상태를 변경하려는 의도를 설명하는 객체입니다. 각 액션은 type 필드를 가지고 있으며, 필요한 경우 추가 데이터를 포함할 수 있습니다.
   • 예를 들어, "INCREMENT" 또는 "DECREMENT" 같은 type 필드를 가진 액션 객체가 상태 변경의 의도를 전달합니다.

   const incrementAction = { type: 'INCREMENT' };
   const decrementAction = { type: 'DECREMENT' };

3. 리듀서(Reducer):
   • 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다. 상태 변경 로직은 모두 리듀서에 정의됩니다.
   • 리듀서는 불변성을 유지하면서 상태를 변경해야 하며, 항상 새로운 상태 객체를 반환해야 합니다.

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

4. 디스패치(Dispatch):
   • dispatch 함수는 액션을 스토어에 전달하여 리듀서를 실행시키고 상태를 변경합니다.
   • 컴포넌트에서 상태를 변경하려면 dispatch를 호출하고, 액션 객체를 전달합니다.

   store.dispatch({ type: 'INCREMENT' });

5. 구독(Subscribe):
   • subscribe를 통해 상태 변화에 따라 특정 함수가 호출되도록 할 수 있습니다. 이를 통해 상태가 변경될 때 UI를 자동으로 업데이트할 수 있습니다.

Redux의 기본 구조와 동작 흐름

1. 사용자가 액션을 발생시킵니다(예: 버튼 클릭).
2. 디스패치(dispatch)를 통해 액션이 스토어로 전달됩니다.
3. 스토어는 전달된 액션과 현재 상태를 리듀서(reducer)에 전달합니다.
4. 리듀서는 액션의 type에 따라 상태를 업데이트하고 새로운 상태를 반환합니다.
5. 스토어는 새로운 상태를 저장하고, 상태가 변경되었음을 애플리케이션에 알립니다.
6. 컴포넌트는 변경된 상태를 받아 UI를 다시 렌더링합니다.

Redux 사용 예제

아래는 Redux를 사용하여 간단한 카운터 애플리케이션을 만든 예제입니다.

1. Redux 설정

import { createStore } from 'redux';

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

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

2. 상태 변경

// 상태 변경을 위한 액션 디스패치
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // { count: 0 }

3. 구독 및 상태 업데이트

store.subscribe(() => console.log(store.getState()));
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // { count: 2 }
store.dispatch({ type: 'DECREMENT' }); // { count: 1 }

Redux의 장점과 단점

장점:

• 상태 일관성 유지: 모든 상태가 한 곳에 집중되어 관리되므로 상태 일관성을 쉽게 유지할 수 있습니다.
• 디버깅 용이성: 상태 변화가 예측 가능하고 기록이 가능하여 디버깅과 상태 추적이 용이합니다.
• 확장성과 유지보수성: 상태 관리가 잘 구조화되어 있어 대규모 애플리케이션에서도 확장성과 유지보수성이 높습니다.

단점:

• 보일러플레이트 코드: 액션, 리듀서, 스토어 설정 등으로 코드가 길어지고 복잡해질 수 있습니다.
• 초기 학습 난이도: 개념이 많고, 상태 관리 패턴이 복잡하여 초반에 이해하는 데 시간이 걸릴 수 있습니다.

Redux와 Context API의 비교

• Context API는 전역 상태가 단순한 경우에 적합하며, 상태가 복잡하지 않거나 자주 변경되지 않는 경우 효율적입니다.
• Redux는 상태가 복잡하고, 많은 컴포넌트에서 상태를 공유하거나 변경이 자주 발생하는 애플리케이션에서 적합합니다.

Redux Toolkit

최근에는 Redux Toolkit이라는 라이브러리가 Redux의 보일러플레이트 문제를 해결하고, 더 간단하게 Redux를 사용할 수 있도록 돕고 있습니다. Redux Toolkit을 사용하면 상태 관리가 더욱 직관적이고, 코드가 간결해집니다.

요약

Redux는 전역 상태를 관리하는 강력한 라이브러리로, 대규모 애플리케이션에서 상태를 일관성 있게 유지하고 예측 가능하게 만들어줍니다. store, reducer, action, dispatch 등의 개념을 통해 상태 관리를 구조화하여 복잡한 상태를 체계적으로 관리할 수 있습니다.