React Router 최신 스펙

Question

react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다. 여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다.   제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만, router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도, data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다. ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다.   이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다. 일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드 부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다. 그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요? 혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)

짐코딩 · Answer

안녕하세요~! 🙂 React Router 3가지 모드 정리 1. 3가지 모드의 차이점 Declarative Mode (선언적 모드) 가장 기본적인 라우팅 만 제공 <BrowserRouter> 사용 URL 매칭, 네비게이션, Link 컴포넌트 등 기본 기능 Data Mode (데이터 모드) Declarative + 데이터 로딩 기능 추가 createBrowserRouter() 사용 ← 강의와 동일한 방식! loader, action, useFetcher 등 제공 Framework Mode (프레임워크 모드) Data Mode + Vite 플러그인 통합 타입 안전성, 코드 스플리팅, SSR 등 모든 기능 2. 설치 차이에 대한 답변 # 강의에서 사용 npm i react-router-dom # 최신 스펙 npm i react-router 결론: 둘 다 사용 가능합니다! react-router-dom 은 여전히 유효하며 호환됩니다 react-router 는 새로운 통합 패키지입니다 3. 코드 유사성의 이유 강의 코드가 Data Mode 와 동일하기 때문입니다: // 강의 & Data Mode 동일 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 이는 우연이 아니라, 강의에서 이미 Data Mode 방식 을 사용하고 있었던 것입니다. 4. 호환성 및 권장사항 ✅ 강의 코드 그대로 사용 가능합니다! 이유: 문서에 따르면 각 모드는 additive(누적적 즉, 기능이 추가되는 것이에요~!) 기존 react-router-dom 패키지 완전 호환 createBrowserRouter 방식은 현재도 표준 권장사항: 일단 강의 코드 그대로 학습 (문제없음) 나중에 필요시 Framework Mode로 업그레이드 기본기 익힌 후 최신 기능 추가 학습 결론: 혼란스러워할 필요 없습니다. 강의 코드가 이미 현재 표준인 Data Mode와 동일합니다! 🎯   최신 버전 참고차 소스코드 공유드려요~! https://github.com/gymcoding/learn-react-latest