[TIL] React Router Dom 이해

1. React Router Dom 이란?

기존 라우팅 아키텍처는 라우팅이 실행 중인 앱 외부의 구성에서 처리되었다.
그러나, React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.
쉽게 말해, 웹 앱에서 동적 라우팅을 구현 할 수 있게 해주는 라이브러리 이다.

React Router Dom의 활용: SPA

리액트는 SPA이기 때문에, index.js 템플릿 파일을 가지고 있다. 이 템플릿 파일에 JS를 이용해서 다른 컴포넌트를 템플릿 파일(index.js)에 추가하므로써, 페이지를 변경시키게 된다.

이때, React Router Dom 라이브러리가 새 컴포넌트로 라우팅 및 탐색을 한 뒤 렌더링하도록 도와주게 된다.

React Router 설정하기

템플릿 파일(src > index.js)의 루트 구성 요소(App 구성 요소)를 BrowserRouter로 래핑한다.

BrowserRouter 는 HTML5 History API를 사용하여 UI를 URL과 동기화된 상태로 유지해준다.
ex) URL이 localhost:3000/home 일 때, Home 컴포넌트(UI)를 동기화 상태로 유지하고 싶을 때, BrowserRouter 가 이를 유지시켜주는 것이다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  /* <React.StrictMode>
    <App />
  </React.StrictMode> */
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
reportWebVitals();

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

Routes

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

Route

Route는 단일 경로를 만드는 데 사용되며, 두 가지 속성을 가진다.
1. path : 매칭 후 렌더링 할 컴포넌트의 url 경로를 지정한다. 이 경로의 이름은 자유롭게 지정할 수 있다.
2. element : 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.

Link

HTML 의 a요소와 유사하다.
Link 컴포넌트의 to 속성은 이동할 컴포넌트의 경로(path)를 지정한다.

function Home() {
	return (
		<div>
        	<Link to="about">About 이동</Link>
        </div>
	)
}

Link 컴포넌트 동작 순서

1. About 이동 클릭
2. 기존 localhost:3000/home 에서 localhost:3000/about 으로 경로 변경
3. BrowserRouter 에서 History API를 사용하여 About 컴포넌트(UI)를 about 경로(URL)와 동기화 상태 유지

Rouet와 Link의 차이

Route는 요청된 URL 에 따라 매칭된 컴포넌트를 렌더링 시키는 것이라고 이해하면 된다.
그러나, Link 컴포넌트는 지정된 URL로 이동시키는 역할만 수행한다. 즉, Link 태그의 URL로 페이지 주소로 이동 할 뿐, 해당 주소에 맞는 UI(컴포넌트)를 새로 불러오지 않는다.

Route : URL에 맞게 컴포넌트 렌더링
Link : URL 변경