React Router Dom이란?

• React Router Dom을 사용하면 웹 앱에서 동적 구현을 할 수 있습니다.
• 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router Dom은 앱 및 플랫폼의 요구사항에 따라 컴포넌트 기반 라우팅을 용이하게 합니다.

Single Page Application (SPA)

• 리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고있습니다.
• 이 하나의 템플릿에 JS를 이용하여 다른 컴포넌트를 index.html 템플릿에 넣으므로 페이지를 변경해줍니다.
• 이 때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 됩니다.
  

React Router Dom 설치하기

npm install react-router-dom --save

// or

yarn add react-router-dom

React Router 설정하기

ReactDOM.render(
  <React.StrictMode>
  	<App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 아래와 같이 감싸준다.
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
  	<App />
  </BrowserRouter>,
  document.getElementById('root')
);
// BrowserRouter : HTML5 History API(pushState, replaceState 및 popState 이벤트)를 사용하여 UI를 URL과 동기화된 상태로 유지해줍니다.

여러 컴포넌트 생성 및 라우트 정의하기

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

// http://localhost:3000/contact
function Contact() {
	return (
    	<div>
      		<h1>Contact Page</h1>
      	</div>
    )
}

// http://localhost:3000/about
function About() {
	return (
    	<div>
      		<h1>About Page</h1>
      	</div>
    )
}

// http://localhost:3000/home
function Home() {
	return (
    	<div>
      		<h1>Home Page</h1>
      	</div>
    );
}

Link를 이용해 경로를 이동하기

import { Link } from 'react-router-dom';

function Home() {
	return (
    	<div>
      		<h1>홈페이지</h1>
      		<Link to="about">About 페이지를 보여주기</Link>
      		<Link to="contact">Contact 페이지를 보여주기</Link>
      	</div>
    );
}
// Link 구성 요소는 HTML의 앵커 요소(<a />)와 유사합니다. 그것의 to 속성은 링크가 당신을 데려가는 경로를 지정합니다.
// 앱 구성 요소에 나열된 경로 이름을 생성했기 때문에 링크를 클릭하면 경로를 살펴보 고 해당 경로 이름으로 구성 요소를 렌더링합니다.