강의를 보며 따라하던 중 강사님께서 npm i react-router 하시는 것을 보았다. 지금껏 react-router-dom의 의존성 패키지 중 하나라고만 생각했는데, 단독으로 설치해도 무리 없이 사용할 수 있다니?

그러면 react-router과 react-router-dom의 차이가 뭐지..? 🤔 (이상한 호기심 발동)

react-router과 react-router-dom

일단 react-router은 React에서 라우팅을 위해 사용되는 표준 라이브러리로 코어 기능들을 갖고 있는 라이브러리다.

그리고 react-router를 모바일 용/웹 브라우저 용으로 나누어 만들어진 것이 react-router-native와 react-router-dom이다. 해당 라이브러리에는 react-router의 모든 것을 포함하고 DOM 관련 API가 추가되었다고 한다.

그래서 npm list react-router-dom 을 실행 해보면 react-router가 의존성으로 설치 되어있는 것을 볼 수 있다.

사용성 차이?

현재 내가 설치한 react-router의 버전은 다음과 같다.

 "react-router": "^7.6.1",

그렇다. react-router@7 이다.

해당 라이브러리로 라우팅을 구현하는데 react-router-dom과 어떠한 차이점도 느끼지못해 왜 라이브러리를 이렇게 나눴는지 점점더 의문이 생겨났고 react-router의 업데이트 내역까지 살펴보게 되었다.

React Router 핵심 개념과 버전 | react-router-dom

👉 https://sillimmouse.tistory.com/103

해당 포스트의 '버전별 특징' 항목을 살펴보면 업데이트가 될 수 록 내가 아는 react-router-dom의 기능들이 보이는 것이 아닌가? 어쩐지 구분이 잘 안되더라 ...

그리고 엔딩

그리고 생각치도 못한 레딧의 글을 발견했는데 ...

React Router(이전)에는 웹용 DOM과 모바일용 네이티브, 두 가지 버전이 있었습니다. v7에서는 네이티브와 "react-router-dom"이라는 이름을 버리고 "react-router"로만 변경했습니다.

react-router와 동일한 react-router-dom의 v7 버전이 아직 있지만, v6에서 업그레이드할 때만 사용해야 합니다. 업그레이드가 완료되면 모든 import 구문을 변경하고 react-router를 사용해야 합니다.

두둥

react-router-dom은 이제 더 이상 사용되지 않습니다.

두둥..?!

React-router-dom 패키지는 더 이상 사용되지 않으며 이전 버전과의 호환성을 위해서만 유지됩니다. 반응 라우터 패키지의 모든 것을 다시 내보냅니다. v7 이상의 반응 라우터에서 모든 것을 가져오려면 애플리케이션을 변환해야 합니다.

어라 ~~~!!

생각치도 못한 결과가 나왔다 ... 웹 용으로 분리가 되었다가 다시 합쳐지려는 모양이다 😮 react-router-native도 같이 합쳐지는 건지는 잘 모르겠다. 개인적으로 이 라이브러리는 쓸 일이 없었어서 나중에 사용할 일이 있으면 찾아 보는걸로.

오늘도 뭔가 뻘짓을 한 기분이 살짝 ... 하지만 궁금증을 해결했으니까 긍정적으로 생각하자 😅 ! !

---

관련 문서

https://www.reddit.com/r/reactjs/comments/1hj4bz4/what_is_the_difference_between_reactrouter_and/

https://www.npmjs.com/package/react-router-dom/v/0.0.0-experimental-fbbd4fd81