Redux의 데이터 흐름 , FLUX 패턴

Redux의 데이터 흐름

React에서의 기본적인 데이터 흐름은 하향식으로 단방향이다. 그리고 자식 컴포넌트3, 6 에서 사용되는 State 들을 처리할땐 그 상태는 최상위 컴포넌트에 존재해야 한다. 하지만 이러한 방식이 자식과 최상위 컴포넌트 사이에 수많은 컴포넌트가 존재 한다면 State 끌어올림과 props 내려주기를 수많이 반복해야 하기 때문에 비효율적으로 보일 수 있다.

일반 react

Redux라는 상태관리 라이브러리를 사용한다면 전역 상태를 관리할 수 있는 저장소인 store를 통해서 데이터가 전달되기 때문에 위의 문제를 깔끔하게 해결 할 수 있다.

Redux 사용

FLUX 패턴

Flux 패턴은 2014년 페이스북에서 발표한 아키텍쳐이고 Client-Side 웹 어플리케이션을 만들기 위한 디자인 패턴이다.

초기에 어플들이 일반적으로 사용하던 MVC 패턴은 아래와 같다.

MVC 패턴

Model에 데이터를 저장하고 Controller를 이용해 Model 의 데이터를 CRUD 한다. Model의 데이터가 변경되면 View 로 전달되어 사용자에게 보여지고 반대의 경우로 사용자가 View를 통해서 Model의 데이터를 업데이트 할 수 있다.

 

이러한 양방향 데이터 방식은 어플의 규모가 커지고 사용자들이 동시에 한번에 많은 업데이트를 요청하면 수많은 Model이 생기며 데이터의 흐름이 복잡해진다. 결과적으로 React 와 같은 단방향 데이터 흐름을 가지는 Flux 패턴을 고안한다.

Flux 패턴

Action 에서는 데이터를 변경하는 행위가 일어나게 되면 Dispatcher 로 전달되는 객체이다. ActionCreator 메서드는 새로 발생하는 Action의 타입, 데이터를 묶어서 아래와 같이 보낸다.

{
  type: 'SET_PROFILE',
  data: {
    'name': 'Harry',
    'age': 458
  }
}

Dispatcher 는 store들이 등록한 Action 의 타입마다 콜백함수가 들어있다. Action을 감지하면 Store들이 타입에 맞게 Store 의 콜백함수를 실행한다. Store의 데이터 조작은 Dispatcher를 통해서만 가능하다.

 

Store ( Model ) store는 상태를 저장하거나 상태를 변경할 수 있는 메서드를 가지고 있다. 액션에 타입의 종류에 따라 상응하는 데이터 변경 콜백함수를 Dispatcher에 등록한다.

 

View  는 React의 컴포넌트와 유사하다. 저장소에서 View에게 상태가 변경된것을 알려주게 되면 최상위 View는 저장소에서 데이터를 꺼내 자식 View에게 데이터를 내려주고 새로운 데이터를 받은 View는 화면을 리렌더하게 된다. 그리고 사용자가 View를 통해 조작을 하게되면 그에 맞는 Action 객체를 생성한다.

 

 

 

 

 

참고자료, 참고 블로그

CodeStates (참고자료)

https://velog.io/@andy0011/Flux-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80