[번역] React Router v8

Brooks Lybrand - 2025년 2월 12일


오늘 우리는 React Router v8을 발표하게 되어 매우 기쁩니다!
React Router는 12년의 역사 동안 여러 번 진화해 왔습니다. 이 프로젝트를 믿고 사용해 주신 수천 명의 개발자, 수백만 개의 프로젝트, 그리고 수십억 건의 다운로드에 깊은 감사를 표합니다.
오랫동안 함께해 온 분들이라면, React Router의 새로운 메이저 버전이 나올 때마다 수많은 파괴적 변경 사항(breaking changes) 때문에 가슴이 답답해졌던 시절을 기억하실지도 모르겠습니다. Michael과 Ryan을 대신해 사과드리며, 기록을 다시 한번 확인해 주시길 부탁드립니다. 우리는 퓨처 플래그(future flags)를 통해 여러 번의 '지루한' 업그레이드를 출시해 왔으며, 이번 버전은 역대 가장 지루한 업그레이드가 될 것입니다.
우리는 React Router 초기 시절(대부분의 팀원이 합류하기 전)부터 많은 것을 배웠으며, 지난 몇 번의 메이저 버전의 목표는 이를 최대한 지루하게 만드는 것이었습니다. 이번에도 최선을 다했습니다. 그리고 앞으로의 메이저 버전을 더욱 예측 가능하게, 결과적으로 더 지루하게 만들기 위해 연간 메이저 릴리스 일정을 도입하기로 했습니다.
지루한 릴리스의 유일한 단점은 블로그 포스트에서 분위기를 띄우기가 어렵다는 점입니다(제가 그 어려운 일을 맡게 되었네요). 그럼에도 불구하고, 팀이 v7 이후 무엇을 해왔는지, v8에서 무엇이 달라지는지, 어떻게 업그레이드하는지, 그리고 미래는 어떤 모습일지 정리해 보겠습니다.

v7 요약

React Router v7의 가장 큰 소식은 프레임워크 모드(Framework Mode)의 도입이었습니다. 이는 다음과 같은 기능을 통해 React 애플리케이션을 업그레이드하는 Vite 플러그인입니다:
  • 타입 안전한 Route Module API
  • 지능적인 코드 분할(code splitting)
  • SPA, SSR 및 정적 렌더링 전략
  • 데이터 로딩 및 뮤테이션(mutation)
  • 그 외 다수!
v7의 목표는 React Router가 모든 React 기반 애플리케이션 개발을 위한 원스톱 패키지가 되는 것이었습니다. 수년 동안 그래왔듯이 React Router를 단순한 클라이언트 사이드 라우터로 사용할 수도 있고, 데이터 모드(Data Mode)로 커스텀 프레임워크를 구축하거나, 풀스택 프레임워크로 완전히 활용할 수도 있습니다.
우리는 세 가지 React Router 모드를 모두 계속 지원하고 개선하는 동시에, 서버 컴포넌트(Server Components) 및 서버 액션(Server Actions)과 같이 React가 도입하는 다른 기능들도 수용할 예정입니다(이에 대해서는 나중에 더 자세히 설명하겠습니다).
React로 작업할 때, 주도권은 여러분에게 있어야 한다고 생각합니다. 우리는 서버 컴포넌트, SSR, SSG 또는 그 어떤 기술도 강요하지 않습니다. 여러분에게 적합한 도구를 사용하고, 사용자가 필요로 하는 애플리케이션을 개발하세요. 10년 동안 검증된 라이브러리인 react-router와 함께라면 가능합니다.

새로운 기능

앞서 말씀드렸듯이, 지루한 메이저 버전의 문제는 블로그 포스트가 지루해진다는 것입니다. 그러니 v7 이후 출시한 40개 이상의 릴리스에 대해 잠시 자랑할 시간을 주십시오.
  • 미들웨어(Middleware)/더 나은 컨텍스트 지원
  • 분할된 Route Modules
  • useRoute/useRouterState (unstable)
  • 타입 안전한 href
  • fetcher.reset
  • Vite Environment API 지원
  • Instrumentation API
  • 링크 마스킹(Link masking)
  • 호출 지점 재검증(Call-site revalidation)
  • SPA 모드 개선
  • 사전 렌더링(pre-rendering) 개선
  • 설정 가능한 지연 경로 탐색(Lazy Route Discovery)
  • useTransitions 라우터 prop
  • 객체 기반 route.lazy
  • 하위 리소스 무결성(Subresource integrity)
  • RouterProvider onError
  • 통과 요청(Pass-through Requests)
  • 수많은 성능 개선
  • Agent Skills
  • (unstable) RSC 지원
이것은 전체 목록도 아닙니다(읽다가 지치실 정도로만 길게 나열해 보았습니다).

변경 사항

아무것도 깨지지 않는다면 메이저 버전이라고 할 수 없겠죠. v8의 파괴적 변경 사항은 매우 미미하며, 모두 v7에서 미리 적용할 수 있는 변경 사항들입니다. 피어 의존성(peer dependencies)의 기본 지원 버전 업데이트, 퓨처 플래그, 그리고 지원 중단(deprecations) 사항으로 나누어 살펴보겠습니다.

기본 지원 사양

React Router v8에서 지원하는 최소 버전은 다음과 같습니다:
  • Node 22.22.0+
  • React 19.2.7+
  • Vite 7+
라이브러리의 현대화를 위해 React Router는 이제 ESM 전용 모듈로 배포되며, tsconfig의 target/lib 필드는 전반적으로 ES2022로 업데이트되었습니다.
Node 버전 지원에 관한 참고 사항: v8부터 React Router는 모든 Active LTS Node 버전을 공식 지원하며, Maintenance LTS 버전의 경우 최신 마이너 브랜치만 지원합니다. 즉, 이 블로그 포스트를 작성하는 시점을 기준으로 다음과 같습니다:
  • Node 24는 Active LTS 상태이므로, React Router는 모든 24.x 버전을 공식 지원합니다.
  • Node 22는 Maintenance LTS 상태이므로, React Router는 22.22.x 버전만 공식 지원합니다.
  • 만약 Node 22.23.x 버전이 출시되면, React Router는 마이너 릴리스에서 최소 Node 지원 버전을 22.23.x로 올릴 것입니다.
  • Node 22가 EOL(수명 종료)되면, React Router는 메이저 릴리스에서 지원을 중단합니다.
이를 통해 새로 출시된 보안 패치를 반영하기 위해 최소 Maintenance LTS 버전을 올릴 수 있습니다. 또한 Maintenance LTS 라인으로 백포트된 새로운 Active LTS 기능을 더 빠르고 쉽게 도입할 수 있습니다. 업그레이드된 최소 Maintenance LTS 버전은 React Router 마이너 릴리스에서 수행됩니다.

적용된 퓨처 플래그 동작

다음 v8 퓨처 플래그가 제거되었으며 해당 동작이 이제 기본값이 되었습니다:
  • future.v8_trailingSlashAwareDataRequests
  • future.v8_passThroughRequests
  • future.v8_middleware
  • future.v8_viteEnvironmentApi
  • future.v8_splitRouteModules는 최상위 splitRouteModules 설정 옵션으로 이동되었으며 기본적으로 활성화됩니다.

지원 중단 사항

React Router에서 몇 가지 사소한 지원 중단 사항이 있었습니다:
  • react-router-dom을 제거했습니다. 이는 v6 -> v7 업그레이드를 원활하게 돕기 위한 react-router의 미러일 뿐이었습니다. 여전히 사용 중이라면 안전하게 제거하셔도 됩니다. 대신 react-routerreact-router/dom을 사용하세요.
  • meta API에서 지원 중단된 data 파라미터를 제거하고 loaderData를 사용하도록 변경했습니다.
  • Cloudflare의 Vite 플러그인(@cloudflare/vite-plugin)을 권장하며 기존의 Cloudflare 개발 프록시(@react-router/dev/vite/cloudflare)를 제거했습니다.
  • @react-router/architectcreateRequestHandler에서 useRequestContextDomainName 옵션을 제거했습니다. 이제 해당 동작이 기본값입니다.

업그레이드 방법

기본적으로 위 내용을 확인하시면 됩니다.
  • 피어 의존성 업데이트
  • 퓨처 플래그 적용
  • 지원 중단된 API/react-router-dom 제거
그다음 pnpm i react-router@latest를 실행하면 준비 끝입니다!
더 자세한 내용은 전체 업그레이드 가이드를 확인하거나 AI 에이전트에게 물어보세요.
언제나 그렇듯이, 버그를 발견하면 티켓을 열어주시거나 질문이 있다면 Discord를 통해 문의해 주세요.

React Router의 향후 행보

우리는 오픈 거버넌스(Open Governance) 모델이 작동하는 방식에 매우 만족하고 있으며, 우리의 프로세스를 통해 더 많은 양질의 제안과 버그 수정을 받기를 희망합니다.
위에서 언급했듯이, React Router의 메이저 릴리스 주기를 매년으로 변경할 계획입니다. 이를 통해 메이저 버전은 정기적이고 예측 가능하며, 무엇보다 지루해질 것입니다.
React Router v8 출시와 함께 React Router v6 및 Remix v2의 수명 종료(EOL)를 공식적으로 선언하며, 더 이상 보안 업데이트가 제공되지 않습니다. React Router v7은 v6(및 Remix v2)가 그랬던 것처럼 계속해서 보안 업데이트를 받을 예정입니다. 아직 해당 버전에서 v7으로 업그레이드하지 않으셨다면 지금이 적기입니다(다시 말씀드리지만, 업그레이드는 꽤 지루할 것입니다).
React Router는 항상 최신 React 기능을 지원하고자 합니다. 여기서 많이 언급하지 않은 기능 중 하나는 서버 컴포넌트와 서버 액션 지원입니다. 이 작업은 여전히 진행 중이며 불안정(unstable) 상태이지만, 이는 API를 확정하기 전에 우리가 완전히 만족하는지 확인하고 싶기 때문일 뿐입니다. 여러 템플릿문서가 준비되어 있으니 커뮤니티의 피드백을 기다립니다. 서버 컴포넌트는 선택 사항(opt-in) 아키텍처이자 기능이며, 곧 마이너 버전에서 안정적인 지원을 제공할 수 있을 것으로 예상합니다.
마지막으로, 우리의 설계 목표를 직접 인용하고 싶습니다. React Router를 개선할 때 우리는 다음을 지향합니다:
  • 단순함이 최고다 (Less is More)
  • 라우팅과 데이터 중심
  • 단순한 마이그레이션 경로
  • 최소 공통 모드 (Lowest Common Mode)
이것이 React Router를 계속 개선해 나가는 우리의 신조이자 약속입니다.

Remix에 대하여

React Router에 관한 블로그 포스트의 끝까지 읽으셨다면 이미 최신 소식을 다 알고 계실 것입니다. 하지만 "잠깐, Remix는 어떻게 된 거지?"라고 궁금해하실 분들을 위해 짧게 요약하자면, React Router가 우리의 React 메타 프레임워크이며, Remix는 다른 방향으로 나아가고 있습니다. Remix 3 베타도 확인해 보세요. 꽤 멋집니다.
이 다이어그램은 두 프로젝트가 어떻게 진화해 왔는지, 그리고 앞으로 어떻게 발전시켜 나갈 계획인지 시각적으로 보여줍니다. Remix v0.x–2.x를 React Router의 피처 브랜치(feature branch)라고 생각하시면 됩니다. 성숙해진 후, 우리는 그 아이디어와 API를 다시 React Router로 병합했습니다. 이를 통해 Remix는 진정한 풀스택, 의존성 없는 JavaScript 웹 프레임워크가 될 수 있었고, 동시에 React Router를 기반으로 구축된 수많은 React 웹사이트에 대한 투자를 멈추지 않을 수 있었습니다.
하나의 팀. 두 개의 프로젝트. 하나의 목표: 더 나은 웹사이트 구축.
Remix/React Router 역사의 타임라인

하지만 Brooks, React Router와 Remix 중 무엇을 사용해야 하나요?!?!
검증된 것이 필요하다면 React Router를 계속 사용하세요. 정말 훌륭합니다. 방금 제가 40개 이상의 릴리스, 쉬운 업그레이드 경로, 그리고 향후 계획에 대해 블로그 포스트를 썼지 않습니까. 우리는 분명히 이 프로젝트를 믿고 있습니다.
기술 세계에서 정체된 것은 없으며, 웹과 오픈 소스가 계속해서 앞으로 나아가고 새로운 것을 시도해야 한다고 믿는다면 Remix 3의 원칙을 확인해 보세요. 그 원칙이 마음에 든다면, 다음 프로젝트를 시작할 때 Remix를 고려해 보시기 바랍니다.
0
1

댓글

?

아직 댓글이 없습니다.

첫 번째 댓글을 작성해보세요!

Inkyu Oh님의 다른 글

더보기

유사한 내용의 글