Redux란

Redux는 JavaScript 애플리케이션의 상태(state) 관리를 위한 상태 관리 라이브러리입니다. Redux는 예측 가능하고 일관된 상태 업데이트를 가능하게 하며, 복잡한 애플리케이션에서 상태를 효율적으로 관리할 수 있습니다.

Redux는 Flux 아키텍처의 구현체로서, 단방향 데이터 흐름 패턴을 따릅니다. 애플리케이션의 상태는 단일 저장소(store)에 중앙 집중적으로 관리됩니다. 컴포넌트는 상태를 직접 변경하지 않고, 액션(action)을 통해 상태를 업데이트합니다. 업데이트된 상태는 리듀서(reducer)를 통해 처리되며, 변경된 상태는 다시 컴포넌트에 전달되어 UI를 업데이트합니다.

Redux의 주요 개념과 용어는 다음과 같습니다:

1. 액션(Action): 상태를 업데이트하기 위해 발생하는 이벤트를 나타냅니다. 액션은 일반적으로 객체 형태로 { type: 'ACTION_TYPE', payload: data }와 같이 정의되며, type 필드는 액션의 종류를 식별하고 payload 필드는 필요한 데이터를 포함합니다.
2. 리듀서(Reducer): 액션에 따라 상태를 어떻게 업데이트할지 정의하는 함수입니다. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환합니다. Redux 애플리케이션은 하나 이상의 리듀서를 가질 수 있으며, 복잡한 상태 업데이트 로직을 분리하여 관리할 수 있습니다.
3. 스토어(Store): 상태를 저장하고 관리하는 단일 소스입니다. Redux 애플리케이션은 단일 스토어를 가지며, 스토어는 상태와 리듀서를 포함합니다. 스토어는 상태의 변화를 감지하고, 업데이트된 상태를 컴포넌트에 알립니다.
4. 디스패치(Dispatch): 액션을 스토어에 전달하는 메서드입니다. 디스패치를 통해 액션을 발생시키면, 리듀서가 호출되어 상태를 업데이트합니다.
5. 구독(Subscribe): 스토어의 상태 변화를 감지하고, 상태 변화에 따라 UI를 업데이트하기 위해 구독(subscribe)하는 메서드입니다. 구독을 설정하면, 상태가 업데이트될 때마다 등록한 콜백 함수가 호출됩니다.

Redux는 단순하고 예측 가능한 상태 관리를 제공하여 애플리케이션의 복잡성을 줄이고 유지보수성을 향상시킵니다. 하지만 Redux는 상태 관리를 위해 추가적인 코드와 추상화를 도입하기 때문에, 작은 규모의 단순한 애플리케이션에서는 비효율적일 수 있습니다.

import React from 'react';
import { legacy_createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

// 초기 상태 정의
const initialState = {
  count: 0
};

// 리듀서 함수 정의
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

// 스토어 생성
const store = legacy_createStore(reducer);

// 컴포넌트 정의
const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
};

export default App;

 

이 예제에서는 Redux의 createStore 함수를 사용하여 스토어를 생성합니다. 초기 상태 initialState와 리듀서 함수 reducer를 정의합니다. 리듀서 함수는 현재 상태와 액션을 받아 새로운 상태를 반환하는 역할을 합니다. switch 문을 사용하여 액션의 타입에 따라 상태를 업데이트합니다.

스토어를 생성한 후, subscribe 메서드를 사용하여 스토어의 상태 변화를 구독합니다. 구독 콜백 함수는 상태가 업데이트될 때마다 호출되며, 현재 상태를 출력합니다.

마지막으로, dispatch 메서드를 사용하여 액션을 디스패치합니다. 액션은 { type: 'INCREMENT' }과 같은 객체로 표현되며, 리듀서에 의해 상태가 업데이트됩니다. 디스패치할 때마다 구독한 콜백 함수가 호출되어 현재 상태가 출력됩니다.

이 예제를 실행하면, 디스패치된 액션에 따라 상태가 업데이트되고 현재 상태가 출력됩니다.