[React] react-router-dom

각 페이지별 경로 구성하기

: facebook.com/games , facebook.com/places 처럼 path를 정할 수 있다.

리액트에서는 리액트 라우터 돔이라는 패키지를 이용해서 각 경로에 따라 다른 컴포넌트를 보여주도록 만든다.

react-router-dom이란 ?

라우팅 라이브러리라는 뜻.
웹사이트에서 라우팅이라고하면 , 사용자가 원하는 경로로 보내는 과정이라고 생각하면 된다.
리액트라우터돔은 이러한 라우팅을 쉽게 구현할 수 있도록 리액트 컴포넌트 형태로 제공해주는 라이브러리이다.

react-router-dom을 이용한 라우팅 구성 예시

<BrowserRouter>
	<Routes>
		<Route index element={<MainPage />} />
		<Route path="places" element={<PlacePage />} />
		<Route path="games" element={<GamePage />} />
	</Routes>
</BrowserRouter>

• BrowserRouter 컴포넌트 : 웹브라우저에서 리액트 라우터를 사용해서 라우팅을 할 수 있도록 컴포넌트이다.
  웹브라우저에는 히스토리라는 기능이 내장되어 있는데 , 사용자가 탐색한 페이지들의 방문기록이 저장된다. 그래서 웹 브라우저의 뒤로가기 버튼을 누르면 이 히스토리를 이용해서 이전 페이지가 뭔지 찾고 해당 페이지로 이동하게 되는 것이다.
  즉, BrowserRouter는 이 히스토리를 이용해서 경로를 탐색하게 해주는 컴포넌트라고 이해하면 된다.
• Routes컴포넌트 , Route컴포넌트 : 실제 라우팅 경로를 구성하게 해주는 컴포넌트 Routes는 ‘s’가 붙어 복수를 나타내는 것 처럼 여러개의 라우트 컴포넌트를 childeren으로 가진다.
  Route는 Routes의 하위로 path와 element라른 프롭스를 가진다. path는 경로를 의미하구 , element는 path와 일치할 경우 렌더링을 할 리액트 엘리먼트를 의미한다.