15. 상태 관리 라이브러리 - 1

Redux 소개와 기본 개념

Redux는 React 애플리케이션의 상태 관리를 위한 예측 가능한 상태 컨테이너 라이브러리입니다. 이번 글에서는 Redux의 기본 개념과 주요 요소에 대해 알아보겠습니다.

Redux의 기본 개념

1. 단일 소스 관리 (Single Source of Truth): Redux는 애플리케이션의 상태를 하나의 JavaScript 객체로 관리합니다. 이를 통해 애플리케이션의 전체 상태를 예측 가능하고 중앙에서 효과적으로 관리할 수 있습니다.
2. 불변성 (Immutability): Redux는 불변성을 유지하는 것을 권장합니다. 상태를 변경할 때는 기존 상태를 변경하지 않고 새로운 상태를 반환하는 방식으로 작업해야 합니다.
3. 액션 (Actions): 상태 변경을 위한 특정 이벤트를 의미하며, JavaScript 객체로 표현됩니다. 액션은 type 필드를 가져야 하며, 필요에 따라 payload와 같은 추가 데이터를 포함할 수 있습니다.
4. 리듀서 (Reducers): 이전 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다. Redux 애플리케이션의 상태를 변경하는 데 사용됩니다.
5. 스토어 (Store): 애플리케이션의 상태를 보유하고 있는 객체입니다. 스토어는 상태를 읽기 위한 getState() 메서드와 상태를 업데이트하기 위한 dispatch(action) 메서드를 제공합니다.

간단한 Redux 예제

// 액션 타입 정의
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 액션 생성자 함수
function increment() {
  return { type: INCREMENT };
}

function decrement() {
  return { type: DECREMENT };
}

// 리듀서 함수
function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

// 스토어 생성
const { createStore } = Redux;
const store = createStore(counter);

// 상태 변경 감지 및 출력
store.subscribe(() => console.log(store.getState()));

// 액션 디스패치
store.dispatch(increment());
store.dispatch(increment());
store.dispatch(decrement());

마무리

Redux는 React 애플리케이션의 상태 관리를 위한 강력한 도구입니다. 이를 통해 상태를 예측 가능하게 관리하고 상태 변경을 효과적으로 처리할 수 있습니다. Redux의 기본 개념을 이해하고 실제로 사용해보면서 더 깊이 있는 이해를 할 수 있을 것입니다.