React Router v7 소개

React Router v7

지금까지의 React Router는 단순한 라우팅 라이브러리였지만, 이제는 Next.js처럼 자체적인 데이터 관리와 렌더링 방식까지 제공하는 프레임워크로 발전하고 있다.
Remix 팀은 Remix와 React Router의 기능이 매우 유사해졌다는 점을 인식하고, 두 프로젝트를 통합하기로 결정했다. React Router v7은 Remix의 모든 주요 기능을 포함하게 되었다.

React Router를 라이브러리로 사용하는 경우

기존 React Router v6처럼 클라이언트 측 라우팅(SPA)을 위한 라이브러리로 사용한다.

특징

• URL을 컴포넌트와 매칭하는 역할만 수행
• URL 데이터 제공 및 페이지 간 이동 지원
• 싱글 페이지 앱(SPA)에 적합: 자체적인 프론트엔드 인프라를 가진 앱에서 쉽게 적용 가능
• 오프라인 및 동기(sync) 아키텍처에 유리: 서버 상태 변화 없이 즉각적인 로컬 반응 가능
• 서버 렌더링(SSR), SEO, 코드 스플리팅 같은 기능이 없음
• v6에서 업그레이드할 때 큰 변경 없이 사용 가능

React Router를 프레임워크로 사용하는 경우

React Router를 완전한 프레임워크처럼 사용할 수도 있다.

특징

• Vite 번들러 및 개발 서버와 통합
• 핫 모듈 교체(HMR) 지원
• 파일 기반 또는 설정 기반 라우팅
• 타입 안전한 데이터 로딩(loaders) 및 액션(actions) 지원
• 자동 페이지 데이터 리로드
• 서버 사이드 렌더링(SSR), SPA, 정적 렌더링 지원
• SEO, 에러 경계, 자산(asset) 로딩 관리 가능

결론

	라이브러리	프레임워크
라우팅 방식	<Routes>와 <Route>로 정의	routes.ts에서 설정
코드 스플리팅	없음	자동 적용
데이터 로딩	useEffect + fetch 사용	loader 제공
데이터 업데이트	수동 처리 필요	action 사용
SEO 최적화	없음	자동 처리 가능
SSR 지원	❌ (클라이언트 사이드 전용)	✅
타입 안전성	직접 관리해야 함	자동 적용
핫 모듈 교체(HMR)	지원 안 함	지원

React Router를 단순히 라우팅을 위한 라이브러리로 사용할 수도 있고, 프레임워크처럼 완전한 데이터 관리 및 SSR 기능까지 포함한 풀스택 환경으로 사용할 수도 있다.
만약 기존 React Router v6처럼 간단한 클라이언트 측 라우팅을 원한다면 라이브러리 모드가 적합하다. 더 강력한 기능(SSR, 데이터 로딩, 타입 안전성 등)을 원한다면 프레임워크 모드를 활용할 수 있다.

향후 React Router: The Framework의 공식문서를 정리하고자 한다.

참고 https://velog.io/@hazae23/Merging-Remix-and-React-Router