react-router-dom을 사용하는 이유와 구조

electron.js와 react로 데스크탑 메신저앱을 만들면서 초반에 router path를 잡아야 할 필요성을 느껴 react-router-dom을 사용했다.

또한 electron.js에서 ipcRenderer를 통해 react에서 만든 브라우저를 electron의 새 창으로 띄우고 싶어서,

react-router-dom를 통해 새 창으로 띄우려는 path를 잡아 loadURL(path주소) 이벤트를 사용할 수도 있었다.

 

오늘은 이 react-router-dom 개념에 대해 포스팅 해보려고 한다.

 

 

react-router-dom

react에서 라우팅을 구현하기 위한 라이브러리이다. 기본적으로, SPA(Single Page Application)에서 페이지를 다시 로드하지 않고도 다른 뷰나 컴포넌트를 표시할 수 있도록 도와준다.

 

다음은 react-router-dom의 주요 컴포넌트와 개념이다.

 

 

1. BrowserRouter (as Router) <BrowserRouter>

BrowserRouter(별칭으로 '<Router>')는 어플리케이션의 최상위 컴포넌트를 감싸서 모든 자식 컴포넌트들이 라우팅 기능을 사용할 수 있도록 한다. 따라서 애플리케이션의 최상위 레벨에서 한 번만 사용되어야 한다. 이 컴포넌트는 모든 라우팅 관련 컴포넌트들에게 라우팅 컨텍스트와 기능을 제공한다.

 

 

2. Routes <Routes>

Routes 컴포넌트는 여러 Route 컴포넌트를 포함하는 것으로, 실제 라우팅 로직을 정의하는 컴포넌트이다.

 

 

3. Route <Route>

 

'Route' 컴포넌트는 주어진 경로와 현재 URL이 일치할 때 특정 컴포넌트를 렌더링한다.
'path' prop은 URL 경로를 지정한다.
'element' prop은 해당 경로와 일치할 때 렌더링될 컴포넌트를 지정한다.

 

이 내용이 뭔지 이해가 안되면 아래 예시를 보면 된다.

 

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Profile from './Profile';

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

export default App;

 

예제에서는 / 경로에 대해서 Home 컴포넌트를, /about에 대해서는 About 컴포넌트를, 그리고 /profile에 대해서는 Profile 컴포넌트를 렌더링한다.

 

이러한 방식을 통해 사용자는 애플리케이션의 다른 부분 사이를 이동하면서도 페이지 전체를 다시 로드하지 않고 원하는 컴포넌트만 렌더링할 수 있다.