React Router vs React Router DOM

urimee·2024년 4월 19일

react

목록 보기

1/1

react-router와 React Router DOM은 url을 이동시키는 데 따른 페이지를 routing 하기 위해 개발시에 한 번쯤은 마주쳤을 것이라 생각합니다. 하지만 개발하는 과정에서 항상 react-router를 설치해야하는것인지 혹은 react-router-dom package를 설치해야하는 것인지 헷갈렸던 경험이 있기에 이번 포스팅으로 정리해볼까합니다.

[1] React Router를 사용하는 이유와 React의 특성

(1) React는 SPA(Single Page Application)이다.

기본적으로 리액트는 SPA(Single Page Application)이다.
모든 컴포넌트의 변화가 한 페이지 안에서 일어납니다.

이 말의 의미는 다른 URL로 이동하면 페이지 전체가 교체되는 것이 아니라 한 페이지 내부에서 컴포넌트의 변화만 일어난다는 의미입니다.

React는 기본적으로 SPA(Single Page Application)를 만드는데 특화되었기 때문에 별도의 라우팅(Routing) - 주어진 URL에 따라 다른 웹페이지를 제공하는 것 - 이 구현되어 있지 않습니다.

따라서 react-router-dom 라이브러리를 사용해 리액트에서도 라우팅을 구현할 수 있습니다.

정리하자면, React는 한 페이지 내에서 컴포넌트만 변화하는 방향으로 제공하는 SPA에 특화되어 있기에 url이 변화해 페이지를 변화시켜주는 routing 기술을 제공하고 있지 않고 따라서 react-router나 react-router-dom과 같은 기술을 따로 사용한다는 의미입니다.

(2) Why Router?

그러면 <a href = ""> 태그를 사용하면 되는 것 아닌가?

하지만, <a> 태그를 통해 다른 페이지로 이동하면 서버에 완전히 새로운 페이지를 요청하게 되고, SPA를 만드는데 특화된 react는 새로고침을 수행함과 동시에 현재 컴포넌트가 갖고 있는 모든 상태값을 잃게 됩니다.

React는 default로 routing 기술을 제공하고 있진 않기에, React Router는 SPA를 다양한 view로 제공하기 위해 효과적인 선택입니다.

[2] React Router란 무엇인가?

React Router는 URL과 일치하는 interface를 동기화하게 해줍니다. React Router는 특정 URL을 위해 어떤 display를 보여줄지 정의합니다.

React Router와 연관된 3개의 main package

react-router : route-matching algorithm과 hook을 포함한 React Router의 중심 기능을 포함하고 있음.
react-router-dom : react-router안의 모든 것들과 몇개의 DOM-Specific API들을 더해서 가지고 있음
react-router-native : react-router안의 모든 것들과 몇개의 React Natvie-Soecific API들을 더해서 가지고 있음.

[3] React-Router-DOM이란 무엇인가?

react-router-dom의 주요한 가능은 web application에서 동적 routing을 수행하는 것이다.

(1) React-Router-DOM을 사용하는 방법

STEP 1. 패키지 다운로드하기

npm install react-router-dom

STEP 2. <BrowserRouter> import 하기

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
 return (
  <BrowserRouter>

  </BrowserRouter>
 );
}

export default App;

STEP 3. <Route>라는 child componenet를 아래에 import하기

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './components/about';
import Home from './components/home';

function App() {
return (
<BrowserRouter>
 <div>
   <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
 </div>
</BrowserRouter>
);
}

URL이 특정한 path에 따라 바뀌도록 되어 있기 때문에, user interface는 특정한 component를 보여주도록 변한다.

BrowserRouter
: BrowserRouter은 다른 모든 route componenet를 저장하는 react-router-dom에서는 parent componenet이다.
Routes
: Routes는 v6에서 소개된 새로운 컴포넌트이다. switch componenet를 대신한다.
Route
: Route는 URL과 특정한 path가 일치할 때 특정한 UI를 랜더링하는 child componenet이다.

[4] React Router vs React Router Dom의 차이

react-router는 React application에서 routing을 실행하기 위한 기능들과 보편적인 컴포넌트를 포함하고 있는 핵심 패키지이다.

반면, react-router-dom은 오직 web-browser 기반으로한 application 개발을 할 때 특화된 패키지이다. 얘는 react-router와 같은 dependency를 제공하고, <BrowserRouter>와 <Link>와 같은 binding을 제공한다.

[5] 그래서, 어떨 때 뭘 사용해야하는데?

만약, web application을 작업하고 있다면 react-router-dom을 사용하는 것이 좋다. 왜냐하면, web application에서 필요한 거의 모든 컴포넌트와 reature들을 포함하고 있기 때문이다. react-router-dom을 설치한다면 react-router도 dependency로 포함하고 있기 때문에 따로 react-router를 설치할 필요도 없다.