Redux, 상태를 관리하는 단 하나의 별

- Redux?

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.

여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다.

위 글은 Redux 공식 홈페이지의 Redux에 대한 설명이다.

이해가 안 되더라도 잠시 Redux는 제쳐두고 Redux를 이해하기 위해 먼저 Flux 패턴에 대해 간단히 배워보도록 하자.

- Flux Pattern

Flux 패턴은 페이스북이 자사 서비스 운영에 있어서 기존 MVC 패턴의 확장성에 한계를 느끼고 만들게 되었다는 새로운 패턴이다.

페이스북은 기존 MVC 패턴이 Model과 관련한 View가 대량으로 시스템에 추가되면 위 그림처럼 복잡도가 폭발적으로 증가한다고 말하며 또한, Model과 View 사이의 데이터를 양방향으로 흐르게 할 가능성이 생겨 이해하기 어렵고 디버깅이 힘들어졌다고 한다.

이에 페이스북은 Flux라는 새로운 패턴을 선보였는데, 이는 다음과 같다.

이런 단방향 구조에서 새로운 데이터를 넣으면 처음부터 다시 흐름이 시작된다.

먼저, Action 부터 살펴보면, Action은 말 그대로 무언가를 위한 행위다.

 

이는 곧 명령과 같은데, 변경사항과 사용자와의 상호작용이 거쳐가야 하는 모든 것들을 말한다.

애플리케이션의 상태를 변경하거나 View를 업데이트하고 싶을때 Action이 필요하다.

다음으로, Dispatcher는 Action을 보낼 모든 Store를 가지고 있고, Action이 오면 여러 스토어에 액션을 보낸다.

또한 동기적으로 순차적 처리를 할 수 있도록 관리한다.

Store는 어플리케이션의 상태와 로직을 가지고 있는 저장소이다.

이 Store 내부에 상태와 상태를 변경하는 메서드를 작성해 놓는다.

Dispatcher가 전달한 Action을 적절히 처리 후 View에 전달한다.

마지막으로 View에서는 Store가 새로운 상태를 넘겨주면, Controller View가 자신 아래의 모든 View에게 새로운 상태에 맞게 렌더링 하라고 알린다.

여기까지가 간략한 Flux 패턴의 흐름이다.

- 단 하나의 저장소

그렇다면 이제 다시 Redux로 돌아와서 페이스북은 왜 Flux 패턴으로도 부족하여 Redux를 채택하게 되었는지 알아보자.

일단 Redux는 Flux 패턴에서 부족한 점을 보완한 Flux 패턴 구현체이다

가장 두드러지는 차이점은 Redux는 단 하나의 Store만을 가지며 이 하나의 Store에 존재하는 상태들은 불변성을 가진다.

Redux는 Reducer를 이용해 상태의 복사본을 만들어 상태를 갱신한다.

상태를 직접 편집하지 않고 Store에는 저장만 함으로써 Redux는 기존 Flux 패턴에서 상태를 직접적으로 변경하여 갱신하게 되어 상태 정보를 잃어버리는 일이 발생했기에 Store에서 불가능했던 Hot-reloading이 가능해졌다.

이런 방식으로 기존의 상태를 유지하는 것은 또한 상태관리의 새로운 전환점이 되었는데, 바로 시간 여행 디버깅(Time travel debugging)이 가능해졌다는 것이다.

시간여행 디버깅을 하기 위해선 어떻게 해야 할까? 닥터스트레인지는 시간 여행을 하기 위해 자신의 이전 상태 객체를 기록해 두어 손쉽게 돌아갈 수 있도록 하였다.

우리의 시간여행도 이와 다르지 않다.

이전 상태로 돌아가기 위해 이전 상태 객체들을 기록해 두면 되는데 문제는 자바스크립트에서 상태를 배열에 추가하면 같은 객체를 가리키는 새로운 포인터만을 만들 뿐이다.

이 때문에, 제대로 시간여행을 하기 위해선 이전 상태 객체들이 각각의 완벽히 독립된 객체가 될 필요가 있다.

이것은 마찬가지로 Reducer를 통해 복사본을 만들어 상태를 갱신하는 방식으로 상태의 불변성을 보장하기에 가능해진다.

마지막으로, Redux는 React와 궁합이 잘 맞지만 꼭 React와 같이 써야만 하는 것은 아니다.

Redux 공식 홈페이지에도 나와있듯이 Redux는 자바스크립트 앱을 위한 상태관리 도구이다.

최근 페이스북이 Redux조차 버거워 Recoil을 만들어 사용한다지만, 아직까지 Redux는 현존하는 가장 대중적인 상태관리 도구이고 방대한 커뮤니티를 가졌기에 아직까지는 매력적인 도구임이 분명하다.

 

 

 

Thanks for watching, Have a nice day.

References

https://basemenks.tistory.com/284
https://ko.redux.js.org/introduction/getting-started/
https://bestalign.github.io/translation/cartoon-guide-to-flux/
https://blog.coderifleman.com/2015/06/19/mvc-does-not-scale-use-flux-instead/