React Router

Declarative routing for React

React Router 공식 메인 페이지 헤드라인

"또 바꿨냐? 진짜 양심이 있으면 이젠 그만 좀 바꿔라." 안 쓰자니 대안이 마땅치 않아서 굴복하는 더러운 생태계 독점의 현실

1. 개요

리액트 진영에서 웹 애플리케이션의 라우팅을 담당하는 사실상의 표준(De facto standard) 라이브러리다. 싱글 페이지 애플리케이션의 핵심인 클라이언트 사이드 라우팅을 극도로 추상화하여 제공하며, 리액트 개발자라면 절대 피해 갈 수 없는 필수 관문 취급을 받는다. 하지만 버전이 올라갈 때마다 이전 세대의 개발 사상을 가차 없이 쓰레기통에 버리는 파괴적인 업데이트 행보로 인해 수많은 프론트엔드 개발자들의 혈압을 올린 주범이기도 하다.(...)

2. 버전 업데이트의 잔혹사

처음 React Router가 등장했을 때는 선언형 컴포넌트 라우팅의 혁신으로 칭송받았으나, v4에 이르러 라우팅 설계를 아예 통째로 뜯어고치는 만행을 저질렀다. 이로 인해 기존 코드를 마이그레이션하려던 개발자들은 눈물을 흘리며 코드를 재작성해야 했다. 이 짓거리는 v6에서도 화려하게 반복되어, useHistory가 하루아침에 사라지고 useNavigate가 강제되는 등 구버전 레퍼런스를 보고 들어온 초보 개발자들을 사정없이 낚아 올렸다. 결국 인터넷의 블로그 튜토리얼 90%를 쓰레기로 만들었다.1

3. 관련 밈 및 드립

3.1. V6 마이그레이션 잔혹사

v5로 거대 서비스를 운영하던 중 의존성 패치나 웹팩 마이그레이션 이슈로 인해 울며 겨자 먹기로 v6로 넘어가야 했던 개발자들의 곡소리에서 유래했다. 컴포넌트의 속성과 훅의 이름이 싹 바뀌어 버려, 사실상 리팩토링이 아니라 신규 프로젝트 구축에 가까운 노가다를 요구했던 역사적 사건이다.(...)

3.2. Remix의 대리 인질극

리액트 라우터 공식 문서를 보러 들어갔는데, 끈질기게 자매품이자 풀스택 프레임워크인 Remix를 홍보하며 '이걸 쓰면 라우팅 고민이 사라진다'고 가스라이팅을 시전하는 현상을 꼬집는 밈이다.

4. 여담

  • Remix 인수 사건: React Router의 창시자들이 세운 회사인 Remix가 Shopify에 인수되면서, React Router 프레임워크 자체도 사실상 Remix 풀스택 프레임워크의 코어 엔진으로 통합되는 기묘한 운명을 맞이했다.
  • 자매품 React Router Native: 모바일 환경인 React Native에서도 라우팅을 위해 사용하려 시도했으나, 네이티브 특유의 화면 전환 애니메이션과 메모리 관리 한계로 인해 결국 대세는 React Navigation에 완전히 밀렸다.(...)
  • 가상 돔과의 밀월: 내부적으로 가상 돔(Virtual DOM)의 라이프사이클과 맞물려 작동하기 때문에, 비동기 데이터 패칭이 복잡하게 얽히면 상상 초월의 깜빡임이나 라우팅 무한 루프에 빠질 수 있다.

5. 관련 문서

각주

  1. 실제로 프론트엔드 오픈소스 라이브러리 중 메이저 버전 마이그레이션 문서의 가독성이 가장 악랄하기로 정평이 나 있다. 버전 v5에서 v6로 갈 때는 사실상 다른 라이브러리를 배우는 수준이었다.