[React] Flux와 상태관리, 그리고 Redux

안녕하세요. J4J입니다.

 

이번 포스팅은 redux와 관련된 개념들에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Flux 패턴

 

redux를 알기 전에 가장 먼저 flux패턴이 무엇인지에 대한 개념이 잡혀있으면 좋다고 생각합니다.

 

flux패턴의 등장배경에는 페이스북의 일화가 있습니다.

 

한때 페이스북에서 알림이 와있다고 표현되고 있지만 막상 알림을 클릭하게 되면 어떠한 알림도 오지 않았던 버그가 있었다고 합니다.

 

버그를 수정하고 수정을 해도 계속적으로 버그가 재 등장함에 따라 이 문제를 명확하게 해결할 수 있는 방안을 고안했고 그 결과 새로운 아키텍처인 flux패턴을 만들어 해결했다고 합니다.

 

 

 

flux패턴은 기존에 사용되던 mvc패턴의 단점을 보완하고자 등장한 패턴입니다.

 

mvc패턴은 사용자 인터페이스와 비즈니스 로직 처리를 하는 구간이 명확히 나누어져 있기 때문에 여러 사람들과 개발할 때 각자 맡은 부분에 대해서만 개발할 수 있다는 장점을 가지고 있어서 많이 사용되어 왔습니다.

 

하지만 model과 view가 서로 양방향으로 의존되어 있는 관계 때문에 프로젝트의 규모가 점점 커짐에 따라 프로젝트의 복잡도도 같이 커지게 된다는 단점을 가지고 있습니다.

 

MVC 패턴의 문제

 

 

반응형

 

 

이런 문제들을 보완하고자 의존관계가 단방향으로만 이루어져 있는 flux패턴이 등장하게 되었습니다.

 

Flux 패턴

 

 

양방향으로 의존관계가 되어 있는 mvc패턴 대신 단방향으로만 의존관계가 되어 있는 flux패턴을 사용하게 되면서 더욱 유연하게 개발이 이루어지게 되었다고 합니다.

 

flux패턴에서 사용되는 용어들은 다음과 같은 역할을 담당합니다.

 

• Action → 특정 행동을 하기 위한 액션을 의미하는 것으로, 일반적으로 타입과 데이터를 담고 있음
• Dispatcher → 전달받은 Action에 맞는 특정 callback처리가 이루어지는 장소이며 처리된 데이터를 Store에 전달
• Store → Dispatcher에서 처리된 데이터들을 보관하고 있는 장소
• View → 말 그대로 화면을 의미하며 Store에 저장되어 있는 데이터를 가져와 사용자에게 보여줄 수 있음

 

 

 

사실 저는 jsp-spring을 이용하여 mvc패턴, react를 이용하여 flux패턴을 모두 경험해봤지만 큰 규모의 프로젝트를 해본 적이 없어서 그런지 mvc와 flux에 대해 체감이 많이 되지는 않습니다.

 

하지만 아무래도 mvc패턴은 서로서로 물려있는 관계로 되어있기 때문에 복잡해질 것 같다는 느낌이 들긴 하는데... 네.... 느낌만 드네요 일단은...

 

 

 

상태 관리

 

상태 관리라고 하는 것은 하나의 저장소에서 데이터를 관리하는 것을 의미하는 것으로 컴포넌트에서 필요한 데이터가 있을 시 저장소에서 한 번에 가져다 사용할 수 있도록 도와줍니다.

 

만약 리액트에서 상태 관리를 사용하지 않는다면 다음과 같은 상황이 발생할 수 있습니다.

 

상태 관리를 사용하지 않을 경우

 

 

A컴포넌트에서 소유하고 있는 데이터를 D컴포넌트에서도 사용하고 싶을 때 props를 통해 부모-자식간 데이터를 전달하며 D컴포넌트에서 사용할 수 있도록 할 수 있습니다.

 

하지만 만약 프로젝트의 규모가 점점 커진다면 이런 데이터 전달 방식은 프로젝트에 복잡함을 가져오고 유지보수도 힘들어지게 됩니다.

 

 

 

이런 상황을 해결할 때 상태 관리를 활용하면 됩니다.

 

상태 관리를 활용할 경우 다음과 같이 단순하게 D컴포넌트는 저장소에서 한 번에 데이터를 가져다 사용할 수 있게 됩니다.

 

상태 관리를 사용할 경우

 

 

결국 부모-자식간의 관계가 유지되고 있더라도 D컴포넌트가 데이터를 사용하기 위해 props를 줄줄이 전달받을 필요가 없어지게 됩니다.

 

 

728x90

 

 

리액트에서 사용되는 상태 관리는 대표적으로 2가지가 있습니다.

 

• redux
• mobx

 

이 중 특히 가장 많이 사용되는 것이 바로 redux입니다.

 

 

 

Redux

 

flux패턴과 상태 관리를 이해했다면 redux에 대한 이해는 끝난 것입니다.

 

redux에 대해 정의를 간단히 해보자면 flux패턴을 이용하여 상태 관리를 할 수 있도록 도와주는 라이브러리라고 할 수 있습니다.

redux의 아키텍처를 표현하면 다음과 같습니다.

 

redux 아키텍처

 

 

말로 풀어서 설명드리면

 

1. view에서 dispatch를 이용하여 action을 reducer에 전달

2. reducer에서는 action에 맞는 행동을 취하며 store에 데이터를 저장

3. store에 저장되어 있는 데이터를 view에서 가져다 사용

 

이라고 할 수 있습니다.

 

 

 

참조

 

[ReactJS] Flux패턴과 Redux

 

React의 탄생과 Flux 패턴

 

 

 

 

 

 

 

 

이런 redux를 리액트에서 사용해보는 예제 코드는 다음 포스팅에서 진행해보도록 하겠습니다.

 

이상으로 redux와 관련된 개념들에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.