Redux

A Predictable State Container for JS Apps

— Redux 공식 깃허브 저장소 및 도큐먼트 최상단의 공식 슬로건

변수 하나 수정하고 싶을 뿐인데 Action Type 정의하고, Action Creator 만들고, Reducer 분기문 추가하고, Dispatch 날리는 100줄의 코드를 복사 붙여넣기 해야 한다. 분명 상태를 '예측 가능(Predictable)'하게 만든다고 했는데, 내 상태가 왜 이렇게 바뀌었는지 추적하다가 멘탈이 먼저 예측 불가능하게 터진다.(...)

1. 개요

자바스크립트 생태계에서 가장 유명하고 유구한 역사를 자랑하는 전역 상태 관리 라이브러리. 페이스북이 제안한 단방향 데이터 흐름의 Flux 아키텍처를 함수형 프로그래밍 언어 Elm의 사상과 결합하여 완벽한 형태의 라이브러리로 정제해 냈다. React와 찰떡궁합을 자랑하며 수년간 프론트엔드 전역 상태 관리 시장을 독점 독재해 왔으나, 특유의 어마무시한 코드 양(보일러플레이트)과 복잡한 미들웨어 세팅으로 인해 현대에는 Zustand 등 가볍고 세련된 대안 세력에게 점차 안방을 내어주는 추세다.

2. 단 하나의 진실의 원천과 세 가지 대원칙

Redux 아키텍처는 세 가지 타협 없는 대원칙 아래 구동된다. 첫째, 애플리케이션의 모든 전역 상태는 단 하나의 스토어(Store) 안에 하나의 객체 트리 구조로 저장된다(Single Source of Truth). 둘째, 상태는 오직 읽기 전용(Read-only)이며 직접 수정할 수 없고, 오직 어떤 변화를 일으킬지 묘사하는 객체인 액션(Action)을 발행해야만 수정 가능하다. 셋째, 액션을 받아 상태를 변경하는 함수인 리듀서(Reducer)는 반드시 이전 상태를 건드리지 않고 새로운 상태 객체를 반환하는 순수 함수(Pure Function)로 작성되어야 한다. 이 철저한 정합성 덕분에 애플리케이션 상태 변화의 역사를 고스란히 저장해 뒤로 감기, 앞으로 감기 같은 시간 여행(Time-travel) 디버깅이 가능해졌다. 물론 실무에서 시간 여행 디버깅을 실제로 쓰는 개발자는 본 적이 없다.1

3. 보일러플레이트 지옥과 Thunk/Saga라는 거대 미들웨어

Redux를 도입한 개발팀이 가장 먼저 토해내는 불만은 엄청난 양의 무의미한 타이핑 코드, 즉 보일러플레이트(Boilerplate)이다. 단순 카운터 앱 하나를 만드는 데에도 수많은 파일과 인터페이스를 정의해야 해서 코드가 비대해진다. 게다가 Redux 자체는 동기적(Synchronous)인 상태 변경만 처리할 수 있어, 서버 API를 호출하는 비동기 작업을 처리하려면 미들웨어를 반드시 덧붙여야 한다. 이때 자바스크립트 제너레이터를 사용하여 극단적인 제어 흐름을 자랑하는 redux-saga를 쓰는 순간, 프론트엔드 코드에 자바스크립트가 아니라 낯선 우주 프로그래밍 언어가 펼쳐지는 신비로운 경험을 할 수 있다.(...)

4. 관련 밈 및 드립

4.1. 댄 아브라모프가 던진 폭탄

Redux의 창시자인 댄 아브라모프는 정작 'Redux는 너무 많은 보일러플레이트를 요구하므로 대부분의 소형 웹 앱에는 Redux가 필요하지 않다. 그냥 React 내장 State나 Context API를 쓰라'는 역사적인 글(You Might Not Need Redux)을 기고했다. 하지만 이미 수많은 대기업과 SI 프로젝트들이 '채용 공고에 Redux가 필수니 무조건 도입하자'며 프로젝트를 Redux 지옥에 빠뜨려 놓은 상태였기에, 수많은 개발자들이 '만든 놈이 쓰지 말라는데 우리는 왜 이걸 야근해가며 짜고 있냐'며 자조 섞인 눈물을 흘렸다.(...)

4.2. Redux Toolkit (RTK) 이라는 사후 약방문

보일러플레이트 지옥에 지친 개발자들이 대거 탈출하자, Redux 공식 유지보수 팀은 코드의 양을 획기적으로 줄여주는 공식 라이브러리 세트인 'Redux Toolkit(RTK)'을 부랴부랴 발표했다. 확실히 코드 생성이 간결해지고 Immer 라이브러리가 내장되어 불변성 신경 쓰지 않고 막 타이핑해도 잘 돌아가게 바뀌었지만, 이미 마음이 떠난 개발자들은 '이미 더 가볍고 직관적인 Zustand로 갈아탄 지 오래다'라며 시큰둥한 반응을 보였다.

5. 여담

  • 창시자 댄 아브라모프의 메타 입사: 댄 아브라모프는 2015년 React Europe 컨퍼런스에서 Redux를 라이브로 발표하여 전 세계 프론트엔드 커뮤니티의 기립박수를 받았다. 이 천재성을 눈여겨본 메타(구 페이스북)는 발표 직후 그를 바로 정직원으로 납치하다시피 영입했다.
  • 리듀서 이름의 유래: Redux의 'Redu'는 자바스크립트 배열의 내장 함수인 reduce에서 유래했다. 실제로 리듀서 함수는 누적값(이전 상태)과 현재값(액션)을 받아서 하나의 새로운 누적값(다음 상태)을 계산해 내는 전형적인 reduce 연산의 구현체다.
  • Elm 아키텍처의 영향: Redux는 단순한 독창적 발명품이 아니라, 웹 프론트엔드용 함수형 언어인 Elm의 아키텍처를 자바스크립트 환경에 맞추어 완벽하게 이식한 버전에 가깝다. 댄 아브라모프 본인도 Elm 아키텍처가 없었다면 Redux는 존재하지 않았을 것이라고 공공연히 회고했다.

6. 관련 문서

각주

  1. 시간 여행 디버깅을 하려면 모든 전역 상태가 직렬화 가능(Serializable)해야 하는 까다로운 제약이 따르기 때문에, 중간에 클래스 인스턴스나 함수 같은 비직렬화 데이터를 상태에 쑤셔 넣으면 디버그 도구가 즉시 폭발한다. ↩

이 문서를 가리키는 문서