React Router v7

React-router-dom -> React Router v7

React 프로젝트에서 라우팅을 쓸 때, react-router-dom을 당연하게 깔고 시작했었다.

• <BrowserRouter>, <Link>, <NavLink> 등 DOM 전용 라우팅 컴포넌트가 이미 준비되어 있다.
• 뒤로가기 버튼이나 페이지 전환 시 전체 리프레시가 없으니 SPA스럽게 딱 좋다.

위 두개의 이유만으로도 리액트로 SPA 웹사이트를 만드려면 React-Router-Dom 을 냅다 설치해왔던 것이다.

💪 강해진 코어 의존성

기존에는 아래와 같이 Link 태그를 불러와서 SPA 라우팅을 시켜주려면 당연히 너무나도 당연히 react-router-dom 에서 불러왔을 것이다.
하지만 이제는 세상이 바뀌었다. 이제는 Link 태그를 포함 그동안 react-router-dom 에서 제공해주던 태그 및 기능들을 react-router에서 불러오면 되는 것이다.

import { Link } from "react-router-dom"; // 기존의 v6 방식
import { Link } from "react-router"; // 최근 v7 방식

이제는 react-router만 사용해서 SPA를 구현할 수 있게 되었단 것이다.

⁉️ SSR까지 제공하는 프레임워크라고 ??

이번 v7 업데이트 이후로 React-Router는 리액트 라우팅 라이브러리를 넘어서 앞으로 프레임워크로도 가능성을 열었다.

요즘 CRA는 더 이상 React 애플리케이션을 만드는 추천 방법이 아니며, 한동안 추천되지도 않았습니다. 마지막 커밋이 이루어진 지 거의 1년이 되었고, 그 이전에도 커밋 속도가 상당히 느려졌습니다. 현재 CRA는 유지보수되지 않는 것으로 간주되며, React 공식 문서에서도 사용을 추천하지 않습니다.

es모듈 기반으로 훨씬 빠른 번들링을 제공해주는 vite를 기반으로 사용가능한 프레임워크로 이루어졌기 때문에 사용성을 더욱 높일 수 있을 것 같다

앞으로 React-Router v7을 프레임워크로 사용한다면 우리가 경험 할 수 있는 기능을 리스트업 해보자면 다음과 같다.

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

개인적으로 느꼈을때 최근 프론트는 React vs NEXT 의 구도가 되었다고 생각했었는데, 위에서 설명한 여러가지 이유만으로도 정말 앞으로가 기대가 되는 버전업이었다.

---

도움받은 자료들

• 공식문서
• https://velog.io/@feels_bot_man/React-Router-v7-%EC%86%8C%EA%B0%9C
• https://remix.run/blog/react-router-v7