인프런 커뮤니티 질문&답변
작성한 질문수
React Router 최신 스펙
작성
·
32
0
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를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)
답변 1
0
안녕하세요~! 🙂
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와 동일합니다!🎯
최신 버전 참고차 소스코드 공유드려요~!