[React] Redux 라이브러리에 대해 알아봅시다

728x90

React 애플리케이션의 규모가 커질수록 데이터의 흐름과 상태 관리는 더욱 중요한데요.

이러한 문제에 대한 해답으로 Facebook에서 제시한 Flux 아키텍쳐는 단방향 데이터 흐름을 통해 상태 예측 가능성을 높였고, 이를 기반으로 탄생한 Redux는 React 생태계에서 가장 널리 사용되는 상태 관리 라이브러리로 자리매김했는데요.

오늘은 Flux 아키텍쳐와 Flux 아키텍처 기반의 Redux 라이브러리에 대해 알아보도록 하겠씁니다.

1. Flux 아키텍쳐

flux 아키텍쳐는 웹 애플리케이션을 만들 때 사용하는 설계 패턴으로, 데이터가 한 방향으로만 흐르도록 관리해 애플리케이션 구조를 단순화하는 아키텍쳐인데요.

구성 요소 먼저 살펴보시죠.

1.1 Flux 아키텍쳐 구성 요소

flux 아키텍쳐의 핵심 구성 요소는 View, ActionCreator, Dispatcher, Store 총 4가지로 구성되어있습니다.

View : Store에서 제공하는 상태를 UI로 보여주는 React 컴포넌트가 여기에 해당하는데요. 사용자의 액션(클릭, 입력 등)을 통해 Action을 실행할 수 있는 환경 제공하는 영역이라고 볼 수 있겠습니다.
ActionCreator :상태를 변경하기 위한 주요 로직(비즈니스 로직)을 처리하는 영역입니다. 처리 결과를 Action 객체로 반환해 Dispatcher로 전달하는 함수인데요, Action은 Store의 상태를 어떻게 바꿀지에 대한 정보가 담긴 객체로서, Dispatcher를 통해 Store로 전달되어 상태 변경을 유도하는 데 사용됩니다.

// 액션 타입 정의 (오타 방지 및 가독성 향상을 위해 상수로 정의하는 것이 일반적)
const ADD_TODO = 'ADD_TODO';
const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const DELETE_POST = 'DELETE_POST';

// 1. addTodo 액션 생성자
function addTodo(id, text) {
  return {
    type: ADD_TODO,
    payload: {
      id: id,
      text: text
    }
  };
}

// 또는 ES6의 축약 문법 사용 (더 흔하게 사용됨)
const addTodo = (id, text) => ({
  type: ADD_TODO,
  payload: { id, text } // 객체 축약 문법
});

// 2. loginSuccess 액션 생성자
const loginSuccess = (userId, token, username) => ({
  type: LOGIN_SUCCESS,
  payload: {
    userId,
    token,
    username
  }
});

// 3. deletePost 액션 생성자
const deletePost = (postId) => ({
  type: DELETE_POST,
  payload: {
    postId
  }
});

↑ 위의 코드가 액션 생성자의 예시이고요. 액션 생성자를 통해 addTodo(1, 'Redux 배우기')를 호출하면, 아래와 같은 액션 객체가 반환되게 됩니다. ↓

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Redux 배우기'
  }
}

Dispatcher : 데이터를 전달하는 중심 역할을 하는 하나의 통로로, Action에서 받은 메시지를 Store로 전달하는 함수입니다. 액션을 받아 등록된 모든 스토어에 전달하여 해당 액션을 처리하도록 지시하는, Flux 아키텍처에서 데이터 흐름의 시작점이자 제어의 중심점입니다.
Store : 애플리케이션의 상태(State)와 해당 상태를 변경하는 로직(비즈니스 로직)을 담고 있는 곳입니다. 디스패처로부터 액션을 받아 자신의 상태를 업데이트하는 곳으로, 상태를 직접 수정하지 않고 항상 새 상태를 만들어서 불변성을 유지해야 하는 곳입니다. 상태가 변경되면 해당 상태를 구독하고 있는 View에 변경을 알리게 되는데요. 주의할 점은, 스토어의 상태는 직접 변경할 수 없고, 오직 액션을 통해서만 변경되어야 한다는 점입니다.

1.2 Flux 아키텍쳐 실행 흐름

flux 아키텍쳐는 첨부한 이미지처럼 view → action creator → dispatcher → store → view 의 흐름으로 진행되는데요.

자세히 살펴보면,

1) View에서 시작되는 사용자 상호작용 : 사용자가 View에서 버튼 클릭, 텍스트 입력과 같은 행동을 취하면, 데이터 변경이 필요하다는 신호가 발생.

2) Action Creator (액션 생성자)를 통한 액션 생성 : 뷰에서 발생한 상호작용은 액션 생성자(Action Creator)를 호출합니다. 액션 생성자는 해당 상호작용에 대한 정보를 담고 있는 액션(Action) 객체를 생성합니다. 이 액션은 '무슨 일이 일어났는지'를 설명하는 단순한 데이터 덩어리입니다. 예를 들어, "할 일 추가" 버튼을 누르면 addTodo 액션 생성자가 호출되어 { type: 'ADD_TODO', text: '새로운 할 일' }과 같은 액션 객체를 반환합니다.

3) Dispatcher를 통한 액션 전달 : 생성된 액션은 디스패처(Dispatcher)로 전달됩니다. 디스패처는 Flux 아키텍처에서 유일하게 액션을 받아 스토어(Store)로 전달하는 중앙 허브 역할을 합니다. 디스패처는 모든 등록된 스토어들에게 액션이 발생했음을 알리고, 어떤 스토어부터 액션을 처리할지 그 순서를 관리할 수도 있습니다.

4) Store에서 상태 변경 및 알림 : 디스패처로부터 액션을 전달받은 스토어(Store)는 액션의 내용에 따라 자신의 상태(State)를 변경합니다.

5) View의 업데이트 : 스토어로부터 상태 변경 알림을 받은 뷰(View)는 변경된 상태를 기반으로 UI를 다시 렌더링합니다. 이로써 사용자에게 최신 정보가 반영된 화면이 보여지며, 데이터 흐름의 한 사이클이 완료됩니다.

2. Redux 라이브러리

Redux 라이브러리는 Flux 아키텍처의 철학을 기반으로 만들어진 상태 관리 라이브러리로, 복잡 JavaScript 애플리케이션의 상태를 단순화해 관리하기 위한 라이브러리입니다. 주로 React와 함께 사용되지만, 모든 javascript 기반 애플리케이션에 사용가능합니다.

2.1 Redux 라이브러리의 특징

Redux 라이브러리는 다음과 같은 특징을 가지고 있습니다.

컴포넌트 간 상태 공유를 단순화하고, 상태 관리의 예측 가능성을 높이는 데 초점을 맞춤
핫 리로딩(코드 수정 후 바로 반영)과 시간여행 디버깅(상태 변경을 되돌아보는 기능) 같은 개발 편의 기능 제공
애플리케이션 전체 상태를 한 곳(Store)에서 관리하는 중앙 집중식 상태 관리 방식.
상태 변경은 항상 순수 함수(Reducer)를 통해 이루어지며, 동일한 입력은 동일한 출력을 보장(예측 가능성)
데이터는 컴포넌트(이벤트 발생) → 액션(작업 정의) → 리듀서(상태 관리) → 스토어(상태 저장) 순으로 한 방향으로 흐르는, 단방향 흐름.

2.2 Redux 라이브러리 구성 요소

flux아키텍쳐처럼 redux 라이브러리로 주요 구성 요소들을 먼저 살펴봅시다.

View : Store에서 제공하는 상태를 UI로 보여주는 React 컴포넌트가 여기에 해당하는데요. 사용자의 액션(클릭, 입력 등)을 통해 Action을 실행할 수 있는 환경 제공하는 영역이라고 볼 수 있겠습니다.(Flux와 동일)
ActionCreator :상태를 변경하기 위한 주요 로직(비즈니스 로직)을 처리하는 영역입니다. 처리 결과를 Action 객체로 반환해 Dispatcher로 전달하는 함수인데요, Action은 Store의 상태를 어떻게 바꿀지에 대한 정보가 담긴 객체로서, Dispatcher를 통해 Store로 전달되어 상태 변경을 유도하는 데 사용됩니다.(Flux와 동일)
Dispatch 함수 : Flux에서는 명시적인 Dispatcher 객체가 존재하는데요. Redux에서는 별도의 Dispatch 객체는 없고, dispatch 함수가 action을 스토어에 전달하는 역할을 합니다.
Store : 애플리케이션의 전체 상태(State)를 보관하는 단 하나의 객체인데요. Store를 보면 현재 상태와 상태 변경 기록을 알 수 있습니다. Flux와 달리 상태 변경 작업은 Reducer라는 별도 함수로 나눠서 관리해 복잡성을 줄입니다.
Reducer 함수 : 상태 변경 로직을 처리하는 순수 함수입니다. 기존 상태를 복제한 뒤, Action의 요청에 따라 새로운 상태를 생성해 반환해주는 함수이며, 상태가 변경될 때마다 새로운 상태 객체가 생성되므로, 변경 내역 추적이 쉬워지는데 도움을 줍니다.

2.3 Redux 라이브러리 실행 흐름

Redux 아키텍쳐는 첨부한 이미지처럼 view → action creator → dispatch → store → reducers → view 의 흐름으로 진행되는데요.

자세히 살펴보면,

1) View에서 시작되는 사용자 상호작용 : Flux와 동일!

2) Action Creator (액션 생성자)를 통한 액션 생성 : Flux와 동일!

3) Dispatch 함수를 통한 액션 전달 : Flux에서는 명시적인 Dispatcher 객체가 존재하는데요. Redux에서는 별도의 Dispatcher 객체는 없고, store.dispatch() 형태로 스토어 인스턴스의 메서드로 존재하며, 액션(Action) 객체를 스토어에 전달하는 역할을 합니다. 이 함수가 호출되어야 액션이 스토어로 전달되고 상태 변경 프로세스가 시작됩니다.

4) Store에서 상태 변경 및 알림 : Store는 dispatch 함수를 통해 액션을 전달받으면, 자신의 내부에 연결된 Reducer 함수를 호출하여 상태 변경을 위임합니다.하고, 리듀서가 반환한 새로운 상태로 자신을 갱신하게 됩니다.

5) Reducer 함수 : 현재 상태와 디스패치된 액션을 인자로 받아, 기존 상태를 직접 변경하지 않고 액션의 요청에 따라 새로운 상태를 생성해 반환해 store에 전달해줍니다.

6) View의 업데이트 : Flux와 동일!

이런 흐름이라고 할 수 있죠.

이상입니다.

오늘도 읽어주셔서 감사합니다.