React - Redux

김정인·2023년 1월 3일

React

목록 보기

2/4

약 1년 전 부터 사내에서 redux로 상태 관리를 하여 개발하였는데 학습 기간이 짧아 정확하게 이해하지 못하고 구현하느라 개념잡기가 어려웠습니다. 따라서 이번 포스팅으로 개인적으로 정리해보고자 글을 작성합니다. ( 시작하기 앞서 redux 기본 용어에 대해 읽어보시는 것을 추천드립니다! )

Redux에 대해 간단하게 정리한 Notion 입니다.

📌용어 정리

* 스토어(Store) : 상태값을 저장하는 저장소

  전역으로 관리하는 state를 담는 곳입니다. 상태 값을 조작할 리듀서 함수를 인자로 받습니다.

* 리듀서(Reducer) : 상태를 조작하는 함수

리듀서 함수는 초기 상태 값과 액션을 인자로 받아 액션에 조작할 상태를 지정하는 역할을 합니다.
주의할 점은 리듀서안에서 동적인 처리나 변화가 있어서는 안 됩니다.

* 디스패처 함수(Dispatcher) : 액션을 전달하는 함수

  디스패처 함수는 액션 값과 상태에 관한 데이터를 리듀서 함수에 전달하는 역할을 합니다.

* 액션(Action) : 어떤 변화가 필요할 때 발생시키는 신호 객체

  상태 변화가 필요하다면 액션을 일으켜야 합니다. 
  액션은 store에 있는 state를 변경하기 위해 보내는 신호로, 객체로 표현되며 type 필드는 변화가 필요한 상황을 인지하기위해 사용합니다. 
  이를 바탕으로 리듀서에 작동하게 하는 것입니다.
  액션 객체를 만들어주는 함수를 액션 생성 함수(Action Creator)라고 합니다.

📌Redux

Redux는 애플리케이션의 state를 관리하기 위한 오픈소스 JavaScript 라이브러리입니다. 단방향 데이터 흐름(Flux 구조)을 가집니다.

> MVC 패턴에서의 데이터 흐름

> Flux 구조에서 데이터 흐름(Redux)

이와 같이 Flux 구조는 View에서 Action을 넘겨주고, 그 Action은 Dispatcher를 거쳐 데이터 변경을 진행하고 Store에 값을 저장하는 과정을 통해 View는 최종적으로 변경된 데이터를 Store를 통해서 전달받습니다. (Redux의 데이터 흐름)
Redux = Red(ucer) + (Fl)ux

실제 예제 코드 및 Redux 흐름에 대해 좀 더 파악해보고 싶으신 분들은 이전 티스토리에 정리해두었던 React - 상태관리 Redux 기초 글을 한 번 읽어보시면 도움이 될 것 같습니다. (길이 상 실제 코드를 생략했습니다.)

🔎 Redux의 기본 개념 3가지 원칙

하나의 애플리케이션 - 하나의 스토어 (Single source of truth)

여러개의 스토어를 만드는 것은 가능하나, 일반적인 경우는 아니며, 개발자 도구를 제대로 사용하기 힘듭니다.

상태는 읽기 전용 (State is read-only)

state를 직접 변경하는 것은 안되며, 액션&디스패치를 통해 state를 변경해야 합니다.
상태 업데이트를 할 때 기존의 객체는 건들이지 않고 새로운 객체를 생성해야 합니다.(불변성 지켜주기 위해)

변화를 일으키는 함수 리듀서는 순수함수여야 합니다. (Changes are made with pure functions)

리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받습니다.
파라미터 외의 값에는 의존하면 안됩니다.
이전 상태는 절대 건들이지 않고 변화를 준 새로운 상태 객체를 만들어서 반환합니다.
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 합니다.
리덕스 미들웨어의 필요성

리듀서에서 부수 효과(Side Effect)를 가진 함수를 실행할 경우 순수 함수 사용 원칙을 위배하게 됩니다. 따라서 그로 인한 문제를 사전에 방지하기 위해 리덕스는 리덕스 미들웨어를 통해 부수 효과를 처리합니다.

🔎 Redux 미들웨어란?

리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다. 따라서 액션과 리듀서 사이의 중간점이라고 볼 수 있습니다.

1. 리덕스 미들웨어는 왜 필요할까요?

기존의 리덕스는 액션이 발생하면 디스패치를 통해 스토어에게 상태 변화를 알리게 됩니다. 하지만 디스패치된 액션을 스토어로 전달하기 전에 처리하고 싶은 작업이 있는 경우가 있습니다. (액션 발생에 대한 로그 찍기, 액션 취소 작업, 부가적인 다른 액션 발생, 시간 딜레이, API요청 처리 등..)

리덕스에서는 이러한 비동기 작업을 처리하기 위한 방법으로 리덕스 미들웨어를 사용합니다.

2. 리덕스 미들웨어의 비동기 처리 과정