Redux의 작동 방식은 어떻게 되는가?

Redux는 JavaScript 애플리케이션의 상태 관리를 단순화하는 라이브러리입니다. 이는 전역 상태 관리 패턴인 Flux의 구현체 중 하나로 알려져 있습니다. Redux는 단방향 데이터 흐름을 따라 상태를 업데이트하고 관리하는 방식을 채택하고 있습니다.

Redux의 작동 방식을 이해하기 위해서는 Redux의 주요 개념인 액션과 리듀서에 대해 알아야 합니다.

액션 (Actions)

액션은 상태 변화를 일으킬 때 발생하는 이벤트를 의미합니다. 예를 들어, 사용자가 로그인한 경우 액션은 “LOGIN” 이 될 수 있으며, 사용자가 로그아웃한 경우에는 “LOGOUT”이 될 수도 있습니다. 액션은 반드시 type 속성을 가져야 하며, 필요에 따라 추가 데이터를 가질 수도 있습니다.

const loginAction = {
  type: 'LOGIN',
  payload: {
    username: 'john',
    role: 'admin'
  }
};

리듀서 (Reducers)

리듀서는 액션이 발생했을 때 상태를 어떻게 업데이트할지 정의하는 함수입니다. 액션이 발생하면 리듀서는 현재 상태를 입력으로 받아 새로운 상태를 반환합니다. Redux 애플리케이션에는 여러 개의 리듀서가 있을 수 있지만, 각 리듀서는 단일 상태를 관리합니다.

// 예시 리듀서
const initialState = {
  loggedIn: false,
  username: '',
  role: ''
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        loggedIn: true,
        username: action.payload.username,
        role: action.payload.role
      };
    case 'LOGOUT':
      return {
        ...state,
        loggedIn: false,
        username: '',
        role: ''
      };
    default:
      return state;
  }
};

스토어 (Store)

Redux 애플리케이션에는 하나의 스토어가 존재하며, 액션과 리듀서에 의해 관리되는 전역 상태를 저장합니다. 애플리케이션에서 스토어를 생성할 때 초기 상태와 리듀서를 전달해야 합니다.

import { createStore } from 'redux';

const store = createStore(authReducer);

스토어를 생성하면 Redux의 내장 함수인 dispatch를 통해 액션을 발생시키고, getState()를 통해 현재 상태를 조회할 수 있습니다. 또한, 스토어는 subscribe()를 통해 상태 변경 시 호출되는 콜백 함수를 등록할 수도 있습니다.

Redux는 애플리케이션에서 상태를 예측 가능하고 일관성있게 관리할 수 있는 효과적인 방법을 제공합니다. 이를 통해 애플리케이션의 유지보수성을 높이고, 상태 관리에 대한 복잡성을 줄일 수 있습니다.

참고 자료

• Redux 공식 문서: https://redux.js.org/
• Redux 한국어 문서: https://ko.redux.js.org/