리덕스는 JavaScript 애플리케이션을 위한 상태 관리 라이브러리로, 데이터 흐름을 예측 가능하고 디버깅하기 쉽게 만들어줍니다. 리덕스를 사용하면 상태를 예측 가능한 방식으로 업데이트할 수 있으며, 컴포넌트의 성능을 최적화할 수 있습니다.

주요 개념

액션 (Actions)

액션은 상태 변경을 위해 발생하는 이벤트를 나타내는 객체입니다. 여러분이 데이터를 업데이트하려면, 액션을 발생시켜야 합니다. 액션은 type 필드를 반드시 가지고 있어야 합니다.

예시:

const addTodoAction = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

리듀서 (Reducers)

리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 리덕스의 상태 변경은 모두 리듀서에 의해 처리됩니다.

예시:

const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
};

스토어 (Store)

스토어는 애플리케이션의 상태를 담고 있는 객체입니다. 스토어를 생성할 때에는 리듀서를 전달해야 합니다.

예시:

import { createStore } from 'redux';
const store = createStore(todosReducer);

디스패치 (Dispatch)

디스패치는 액션을 스토어에 보내 상태를 업데이트하는 메커니즘입니다.

예시:

store.dispatch(addTodoAction);

구독 (Subscription)

구독은 상태의 변화를 감지하고, 해당 변화에 대응하여 UI를 업데이트하는 메커니즘입니다.

예시:

store.subscribe(() => {
  console.log('상태가 업데이트되었습니다', store.getState());
});

동작 원리

1. 액션을 발생시킵니다.
2. 액션은 스토어에 디스패치됩니다.
3. 스토어에서는 현재 상태와 디스패치된 액션을 리듀서에 전달합니다.
4. 리듀서는 이전 상태와 액션을 이용하여 새로운 상태를 반환합니다.
5. 스토어는 리듀서가 반환한 새로운 상태를 저장합니다.
6. 구독자는 스토어의 상태 변화를 감지하고 적절한 대응을 수행합니다.

이를 통해 애플리케이션의 상태를 예측 가능하고 효율적으로 관리할 수 있습니다.

리덕스는 복잡한 상태 관리를 간소화하고, 애플리케이션의 유지 보수를 용이하게 합니다.

참고 자료: Redux 공식 문서