[React] React router 와 React router dom 에 대해

[React] React router 와 React router dom 에 대해

 

📌 React router 와 React router dom ?

리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다.

그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다.

왜 두가지나 있는거지? 하고 구글링을 했다.

요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다.

즉 React Router DOM 은 React Router 을 포함한다.

 

📌 왜 두 가지로 나뉘어진 걸까?

React router 는 특정 플랫폼에서 라우팅 기능을 지원하기 위해 설계되었다. 특정 플랫폼이라고 하면 웹이나 네이티브 앱을 예를들 수 있다. React router 를 사용하여 웹 애플리케이션을 개발할 때 일반적으로 웹 브라우저와 상호작용하고 웹에서의 라우팅을 처리하기 위한 도구와 컴포넌트가 필요했다.

이에 따라 React Router DOM이 등장했다.

React Router DOM은 React 컴포넌트와 함께 사용되며, HTML5 History API를 사용하여 브라우저의 주소 표시줄을 관리하고, URL 경로에 따라 컴포넌트를 렌더링하며, 링크를 생성하고, 활성 상태를 관리하는 등 웹 브라우저에서의 라우팅에 필요한 기능을 제공한다.

 

📌 React router dom 설치 후  React Router 를 import 하는 것이 가능할까?

위에서 React Router DOM 은 React Router 을 포함한다고 했는데, 그렇다면 보다 넓은 범위의 React Router DOM 을 설치하고서 프로젝트 내부에서 React Router 를 import 해서 사용해도 될까?

결론은 안된다.

React Router DOM 은 React Router 을 포함하고 있지만 두 패키지의 내부 구조가 다르기 때문에 React Router 를 React Router DOM 에서 import 해서 사용하는 것은 불가능하다.

react-router-dom 설치 후 react-router 로 import ❌

react-router-dom 설치 후 react-router-dom 으로 import ⭕

실제로 react-router-dom 을 설치했으면 react-router-dom 으로 import 해야 작동하는 것을 확인할 수 있다.

 

📌 React router vs React router dom 어느 것을 사용하면 되나?

React Router DOM은 편리한 기능과 API를 제공한다. 웹 애플리케이션에서 브라우저의 주소 변화에 따라 적절한 컴포넌트를 렌더링하거나, 브라우저의 히스토리를 관리하는 등의 기능을 제공한다.

React Router DOM은 React Router를 기반으로 하며 웹 개발을 위한 추가 기능을 제공하므로, 대부분의 경우 React Router DOM을 사용하는 것이 좋다.

 

📌 React router 를 사용하는 경우

 React Router만 사용해야 하는 경우는 서버 사이드 렌더링(SSR)이나 네이티브 앱과 같이 특정한 환경에서 라우팅을 처리해야 할 때이다.

서버 사이드 렌더링을 구현하려면 React Router를 사용하여 URL과 컴포넌트 간의 매핑을 설정하고, 서버 측에서 해당 URL에 대한 라우팅을 처리해야 한다. React Router는 이러한 서버 사이드 렌더링 시나리오를 처리하는 데 필요한 기능을 제공한다!