0. React에서의 Router 사용법

0.1. react-router-dom 라이브러리 설치.

npm install react-router-dom

0.2. 기초 사용법

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

const router = () => {
	return (
		<Routes>
				<Route    //r
					path='/'
					element={<rendering_Page/>}
			/>
		</Routes>
	)
}
export default router;

1. BrowserRouter

• 페이지의 새로고침 없이도 주소의 변경이 가능하고, 현재 주소의 정보들을 props를 통해 활용이 가능하다.
• pushState, replaceState, popstate event 등, HTML5의 History API를 사용하여 URL과 UI를 동기해줌
• 위 코드에서는 컴포넌트를 감싸게 된다.

1.1. BrowserRouter props

• basename: 특정한 URL에서 실행되도록 만들어줌. string의 형태.
• future: 무엇을 ‘future flag’로 선택할 지. 즉 어떤 새로운 기능이나 변경된 동작을 활성화하거나 비활성화할 지 선택함. FutureConfig 타입 객체.
• window: 다른 window에서의 변경 사항을 추적할 지에 대한 여부.
• props type 선언:

declare function BrowserRouter(
  props: BrowserRouterProps
): React.ReactElement;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  future?: FutureConfig;
  window?: Window;
}

2. HashRouter

• URL의 해쉬값(#)을 사용하여 주소를 나타냄
• 별도의 서버 설정 없이도 페이지 새로고침 시 오류가 발생하지 않음 ⇒ HashRouter는 # 뒤의 값을 브라우저에서만 관리하고, 서버에는 기본 URL로 데이터를 요청하기 때문.
  
• History API를 사용하지 않아 동적 페이지와의 호환이 어렵다.
• *** 서버를 온전히 제어하기 어려운 “공유 호스팅 시나리오” 상에서 활용하기 좋다!!!

3. BrowserRouter vs HashRouter

	BrowserRouter	HashRouter
props	basename, children, window, future	basename, children, window, future
새로고침 시	경로를 찾지 못할 경우 404 에러 발생	별도 서버 설정 없이도 에러 발생 X
사용 상황	동적 페이지 및 대부분의 페이지에서 사용	정적 페이지 및 공유 호스팅 서버에서 사용
사용법	HTML5의 History API를 활용한 UI 업데이트	URL Hash(#)를 활용한 업데이트