[11] React Router Dom

React Router Dom

React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있고, 
라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.
React Router DOM은 SPA(Single Page Application)에서 URL 기반 탐색과 동적인 경로 매칭을 가능하게 하는 라우팅 라이브러리입니다. 이를 통해 전체 페이지 새로고침 없이도 다양한 화면 간 이동이 가능합니다.

 

React Router DOM의 주요 개념

1. Routes

• Routes는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 한다.
• Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링 해준다.

 

2. Route

• Route는 단일 경로를 만드는데 사용된다. 
• 두가지 속성을 취한다.
  • path는 원하는 컴포넌트의 URL 경로를 지정한다. 이 경로 이름을 원하는 대로 정할 수 있다. 경로 이름이 백슬래시인 컴포넌트는 앱이 처음 로드될 때마다 먼저 렌더링 된다. 이는 홈 구성 요소가 렌더링되는 첫번째 구성 요소가 됨을 의미한다.
  • element 경로에 맞게 렌더링되어야 하는 컴포넌트를 지정한다.

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

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

 

 

React Router DOM 설치

npm install react-router-dom