처음 만난 리덕스 (Redux) 문서
1.2 Flux architecture
다음으로는 Redux에 대해서 설명하기 전에, Redux의 기반이 되는 Flux Architecture에 대해서 먼저 알아보도록 하겠습니다.
Flux 공식 GitHub repository에서는 Flux를 이렇게 정의하고 있습니다.
“An application architecture for React utilizing a unidirectional data flow.”
한국어로 번역해보면 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍처가 됩니다.
Flux는 현재 Meta로 이름을 바꾼, 당시 페이스북에서 리액트를 위해서 만든 것입니다.
리액트도 메타에서 만들었기 때문에, 리액트에서 발생하는 문제를 해결하기 위해서 Flux라는 것을 만든 것이죠.
여기서 단방향 데이터 흐름이라는 부분과 아키텍처라는 부분이 Flux의 정의의 핵심이라고 할 수 있습니다.
Flux는 우리가 곧바로 사용할 수 있는 프레임워크라기 보다는 패턴에 가깝습니다.
여기에서는 패턴이라는 단어 대신 비슷한 뜻으로 아키텍처라는 단어를 사용했습니다.
Flux에 대해서 조금 더 쉽게 표현하자면, 데이터의 흐름을 정의한 하나의 방법이라고 할 수 있습니다.
근데 앞에서 Flux의 데이터의 흐름은 단방향이라고 했습니다.
영어로는 unidirectional이라고 하며, 하나의 방향만 존재한다는 뜻이죠.
여기 Flux Architecture의 구조를 나타낸 그림을 한 번 보도록 하겠습니다.
이 그림에 보면 다양한 요소들이 나오는 것을 볼 수 있는데, Web과 관련된 Web API와 Web API Utils부분은 Flux와는 상관없는 부분이고, 실제로 Flux에서 정의하는 데이터의 흐름과 관련된 부분은 바로 오른쪽 부분입니다.
이 부분을 보면 Action, Dispatcher, Store 같은 것들이 나오는데요, 지금은 일단 그 의미보다는 화살표에 주목해주시기 바랍니다.
화살표의 방향이 어떻게 되어있죠? 한쪽으로만 되어 있죠.
지금 그림상으로는 시계방향으로 한 쪽으로만 화살표가 그려져있습니다.
이 화살표가 가리키는 방향이 바로 데이터가 흘러가는 방향입니다.
그리고 그 방향은 단방향, 즉 앞에서 Flux의 정의에 나왔던 unidirectional이 되는 것입니다.
그럼 이번에는 Flux에서 데이터의 흐름 부분만 나타낸 그림을 보도록 하겠습니다.
먼저 Action에서 출발해보도록 하죠.
Action은 데이터 흐름에 변화를 주기 위한 어떤 동작이 발생한 것이라고 보시면 됩니다.
그리고 그렇게 발생한 Action을 Dispatcher가 받게 됩니다.
영어 단어 Dispatch는 ‘발송하다’, ‘파견하다’ 라는 뜻을 갖고 있습니다.
연예인 스캔들을 다루는 유명매체 이름과 헷갈리지 마시기 바랍니다ㅎㅎ
어찌됐든 Dispatch뒤에 er이 붙은 Dispatcher는, 단어 의미 그대로 Action을 발송하는 역할을 합니다.
그리고 그렇게 발송한 Action의 수신자는 바로 Redux가 됩니다.
즉, Action이 발생했다는 것을 Redux에 알리는 것이죠.
그리고 Dispatcher 다음에 나오는 Store는 데이터들을 저장하는 공간이라고 이해하시면 됩니다.
Dispatcher를 통해 변화된 데이터가 Store에 저장되고, 마지막으로 실제 사용자가 보게 되는 View에는 Store에서 가져온 데이터를 보여주게 되는 것이죠.
그리고 View에서 또 다른 Action이 발생하게 되면, 이것 역시 동일한 흐름을 따라서 처리됩니다.
단방향으로 말이죠.
이렇게 단방향으로 데이터의 흐름을 정의한 것이 바로 Flux Architecture입니다.
그렇다면 Flux와 Redux는 무슨 관계일까요?
한 마디로 정의하면,
"Redux implements Flux"
라고 할 수 있습니다.
Redux가 Flux를 구현했다는 뜻인데, Redux는 Flux라는 Architecture를 실제로 구현한 구현체입니다.
앞에서 Flux는 데이터의 흐름을 정의하는 패턴이라고 말씀드렸었죠.
패턴은 말그대로 실제 프로그램처럼 사용할 수 있는 것이 아니라, 추상적인 개념들을 구조화시켜 정의한 것입니다.
그리고 이런 패턴을 실제 개발할 때 소스코드에 적용해서 사용하게 되는데, Redux는 Flux라는 아키텍처를 곧바로 사용할 수 있게 구현한 라이브러리라고 보면 됩니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.