frontend
Remix v2와 React Router v7 통합 가이드 — 풀스택 웹 프레임워크의 진화
Remix와 React Router가 하나로 통합된 React Router v7의 핵심 변화와 풀스택 라우팅 패턴을 상세히 분석하였다.
- ·React Router v7 출시: 2024년 말
- ·Remix v3는 React Router v7로 통합·브랜드 변경
- ·파일 기반 라우팅 + 중첩 레이아웃 지원
- ·Vite 기반 빌드 시스템으로 전환
Next.js 기반 대시보드를 Remix v2로 전환하면서 loader 병렬 실행 덕분에 페이지 초기 로딩 시간이 40% 단축되었다. 특히 여러 API를 호출하는 페이지에서 기존 useEffect 직렬 호출 패턴과 비교하여 체감 성능 차이가 컸다. action 함수를 통한 폼 처리 패턴이 처음에는 낯설었지만, 낙관적 업데이트 구현이 React Query보다 훨씬 간결하다는 것을 실제 운영하면서 확인하였다.
Remix와 React Router의 통합 배경
두 프로젝트가 하나가 된 이유
Remix와 React Router는 모두 Ryan Florence와 Michael Jackson이 이끄는 Shopify 팀이 개발하였다. Remix가 React Router 위에 서버 사이드 기능을 얹은 구조였기 때문에, 두 프로젝트를 별도로 유지하는 것은 비효율적이었다. React Router v7은 두 프로젝트를 완전히 통합한 결과물로, 클라이언트 전용 SPA부터 풀스택 서버 렌더링까지 하나의 라우터로 커버한다. 기존 React Router v6 사용자는 점진적으로 마이그레이션할 수 있도록 하위 호환성이 유지되었으며, Remix 사용자는 패키지 이름 변경과 일부 설정 수정만으로 전환이 가능하다.
Vite 기반 빌드 시스템 전환
Remix v2부터 빌드 시스템이 자체 번들러에서 Vite로 전환되었다. 이 결정은 Vite 생태계의 광범위한 플러그인 호환성과 빠른 HMR 속도를 활용하기 위한 것이다. vite.config.ts에 remixVitePlugin을 추가하는 것만으로 Remix의 파일 기반 라우팅과 로더·액션 기능을 모두 사용할 수 있게 되었다. 기존 esbuild 기반 빌드 대비 개발 서버 시작 속도가 크게 향상되었으며, Tailwind CSS, shadcn/ui 등 Vite 플러그인과의 통합이 자연스러워졌다.
로더와 액션: 풀스택 데이터 패턴
loader로 서버 데이터 가져오기
React Router v7의 loader 함수는 라우트 파일에서 export하는 서버 전용 함수로, 컴포넌트가 렌더링되기 전에 서버에서 실행된다. loader가 반환하는 데이터는 useLoaderData() 훅으로 컴포넌트에서 타입 안전하게 접근할 수 있다. loader는 Request 객체를 인수로 받아 헤더, 쿼리 파라미터, 쿠키에 접근할 수 있으며, 인증 처리나 리다이렉트도 loader 내부에서 처리한다. 중첩 라우트 구조에서는 각 라우트의 loader가 병렬로 실행되어 데이터 로딩 워터폴 문제를 근본적으로 해소한다.
action으로 폼 제출 처리하기
action 함수는 POST, PUT, DELETE 요청을 처리하는 서버 사이드 핸들러이다. HTML Form 요소의 action 속성을 활용하여 JavaScript 없이도 폼 제출이 동작하도록 설계되어 있어, 진보적 향상(Progressive Enhancement) 원칙을 구현한다. useFetcher() 훅을 사용하면 페이지 이동 없이 백그라운드에서 action을 호출하는 최적화된 UX를 구성할 수 있다. 액션 실행 후 자동으로 현재 페이지의 loader가 재실행되어 최신 데이터가 반영되는 점이 React Query 같은 별도 상태 관리 없이 데이터 동기화를 가능하게 한다.
중첩 라우팅과 레이아웃
Outlet을 활용한 레이아웃 공유
React Router v7의 파일 기반 라우팅에서 중첩 라우트는 Outlet 컴포넌트를 통해 자식 라우트를 렌더링한다. 대시보드처럼 공통 사이드바와 헤더를 유지하면서 콘텐츠 영역만 교체하는 UI를 선언적으로 구성할 수 있다. 각 레이아웃 라우트는 독립적인 loader를 갖기 때문에, 레이아웃에 필요한 사용자 정보와 콘텐츠에 필요한 데이터를 분리하여 병렬로 로딩하는 패턴이 자연스럽게 도출된다.
자주 묻는 질문
기존 Remix v2 프로젝트를 React Router v7로 마이그레이션하려면 어떻게 해야 하나요?+
패키지를 @remix-run/react에서 react-router로 변경하고, remix.config.js를 vite.config.ts의 remixVitePlugin 형태로 변환하는 것이 핵심입니다. 공식 마이그레이션 가이드에 단계별 절차가 상세히 안내되어 있습니다.
React Router v7은 서버 없이 SPA로도 사용할 수 있나요?+
네. loader와 action을 사용하지 않고 클라이언트 전용 라우팅만 구성하면 기존 React Router v6와 동일하게 SPA로 사용할 수 있습니다.
관련 글
TanStack Router v1 완벽 가이드 — 완전 타입 안전 React 라우터
TanStack Router v1의 완전 타입 안전 라우팅, 파일 기반 라우트 생성, 데이터 로더, 검색 파라미터 스키마를 실무 예제와 함께 정리하였다.
React 19 Server Actions 완벽 가이드 — API Route를 대체하는 새로운 표준
React 19에서 도입된 Server Actions의 작동 원리부터 폼 처리, 낙관적 업데이트, 캐시 재검증 전략까지 실무 중심으로 정리하였다.
Vite 6 완벽 가이드 — 환경 API와 Rolldown 통합으로 빌드 혁신
Vite 6의 환경 API(Environment API), Rolldown 통합, 런타임 독립성 강화, 플러그인 마이그레이션 전략을 실무 예제와 함께 정리하였다.