[React] Redux, Flux Pattern

Redux, Flux Pattern

Redux란?

리덕스는 자바스크립트 상태관리 라이브러리임

리덕스는 왜 생겨났을까?

리덕스가 나오기 전 프론트엔드쪽에서 데이터 흐름을 관리하는 방식은 MVC 패턴이었음
MVC 패턴은 Flux Pattern과 달리 양방향 데이터 흐름을 가지고 있음
즉, 모델이 변경되면 뷰가 변경되고, 사용자와의 인터렉션을 통해 뷰에서 변경이 일어나면 모델도 변경됨
이는 프로젝트가 점점 커지면 문제가 됨 -> 왜냐하면 데이터 흐름을 이해하기 어려워지기 때문에 버그가 발생하면 찾기 어려워짐(대표적인 예시 : 페북 - 알람 정보 업데이트가 제대로 안 되어 알람 표시 계속 유지)

MVC Pattern

• Model: 데이터 형식이나 구조를 관리함
  어플리케이션 정보, 데이터를 나타냄
  또한 이러한 데이터나 정보들의 가공을 하는 부분임
• View: 코드가 사용자에게 보여지는 부분을 담당함
  예를 들면 input, 체크박스 항목 등의 사용자 인터페이스 요소 등이 있음
  데이터를 받으면 화면에 표시해주는 역할만 함
• Controller: 변화하는 데이터 관리.
  Model(데이터), View(UI)를 잇는 역할을 함
  즉, 사용자가 데이터를 클릭하고 수정하는 것에 대한 이벤트들을 처리하는 부분임

때문에 2014년 페이스북에서 이에 대한 대안으로 Flux라는 새로운 아키텍처 패턴을 개발함

Flux Pattern이란?

MVC 패턴에서 발생한 문제를 개선하기 위해 나온 아키텍처 패턴
MVC 패턴과 다르게 단방향 데이터 흐름을 가지고 있음
또한 데이터가 단방향으로 흐르기 때문에 데이터를 추적하기 용이하고 흐름이 예측가능하다는 특징이 있음

Flux Pattern 동작 원리

역할

Action
데이터를 변경하기 위한 행위
Action creator 함수는 Action의 type과 payload(변경된 데이터)를 리턴함

Dispatcher
데이터 흐름을 관리함
Store의 조작은 Dispatcher를 통해서만 가능함

Store
데이터(상태) 저장소임(MVC 패턴의 Model 같은 역할)
상태를 변경할 수 있는 메소드를 가지고 있음
View에게 상태가 변경되었다고 알려줌

View
데이터(상태)가 변경되면 화면을 리렌더링함

동작 방식

• 사용자가 입력함
• 사용자 입력에 기반한 Action을 Dispacher에 전달
• Dispatcher는 Store의 데이터를 조작해 변경함
• 변경된 데이터를 View에 반영함

 

=> 2018년, Dan Abramov에 의해 React + flux 구조에 Reducer를 결합한 Redux가 등장하게 됨

왜 Flux pattern이 나왔음에도 리덕스를 사용하는 걸까?

• Flux는 Store가 여러 개 존재할 수 있지만 리덕스는 하나의 Store만 존재할 수 있음
• 리덕스의 Store 안에는 Reducer가 여러 개 존재할 수 있어 재사용할 수 있음
• 리덕스는 다양한 추가 기능을 쉽게 연결할 수 있다.
• 리덕스는 Flux에 비해 구조가 단순함

Redux의 상태관리 순서

- 상태가 변경되어야하는 이벤트 발생 -> 변경될 상태에 대한 정보가 담긴 Action 객체 생성

- Dispatch 함수는 Action 객체를 Reducer 함수로 전달함

- Reducer 함수는 Action 객체의 값을 확인해 전역 상태 저장소 Store의 상태를 변경함

- 상태가 변하면 React는 리렌더링을 함

• Store: state가 관리되는 저장소
• Reducer : Dispatch에서 전달받은 Action 객체의 type 값에 따라 상태를 변경시키는 함수
• Action
• 어떤 액션을 취할 것인지 정의해 놓은 type이 필수로 지정된 객체
  • 보통 Action 객체를 생성하는 함수 Action Creator를 만들어 사용
• Dispatch : Action 객체를 Reducer로 전달해주는 함수

참고