서두

router에 대해서 사용하기만했고 작동 원리에 대해서는 잘 몰라서 작동원리에 대해서 알아보는 시간을 가졌다. 어렵긴 해도 한번 읽어보고 중요한 부분만 옮겨서 적었다.
글의 원문과 출처는 아래에 남겨둔다.

기본 구조

아래 내용 정의를 정리하기전에 그냥 읽다보면 잘 와닿지 않아서 기본 구조를 정리해둔다.
import React, { Component } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './Header';
import Main from './Main';
import Product from './Product';
import NotFound from './NotFound';

const App = () => {
return (

	<div className='App'>
		<BrowserRouter>
			<Header />
			<Routes>
				<Route path="/" element={<Main />}></Route>
				<Route path="/product/*" element={<Product />}></Route>
				{/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */}
				<Route path="*" element={<NotFound />}></Route>
			</Routes>
		</BrowserRouter>
	</div>
);

};

태그로 컴포넌트를 감싸준다.
컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.

BrowserRouter, Router 컴포넌트

BrowserRouter

React 웹 애플리케이션 개발 시 클라이언트 사이드 라우팅을 위해 라우팅 관련 컴포넌트들의 최상단에 위치시켜야 하는 컴포넌트이다.
HTML5를 지원하는 브라우저의 주소를 감지 한다.
react-router-dom 패키지에 속해 있으며 컴포넌트를 렌더링 할 때 props로 history 객체를 전달한다. (변경된것 같은데 router에서 routes로 변경 된것 같다. )

Router 컴포넌트 (routes)

마운트 되는 순간에 props로 전달받은 history 객체의 프로퍼티인 location 객체를 자신의 지역 상태에 저장한다.
props로 전달받은 history 객체를 구독하여 브라우저의 현재 URL이 변경될 때마다 자신의 지역 상태에 해당하는 location 객체가 새로운 location 객체로 대체되도록 한다.

즉 현재 URL의 관한 정보를 컴포넌트가 지역 상태로서 실시간으로 추적하겠다는 의미인 것이다.

렌더링 로직

컴포넌트는 현재의 URL과 관련된 몇몇 정보들을 Context로 구성해서 해당 Context의 Provider 컴포넌트(<RouterContext.Provider>)를 렌더링 한다. 
이때 Context로 구성되는 정보로는 match 객체, location 객체, history 객체가 있다
이를통해 어디서든 브라우저의 현재 URL과 관련된 정보들을 참조할수 있다.

Route 컴포넌트

는 props로 전달받는 path의 값이 브라우저의 현재 URL과 매칭 될 때 특정 컴포넌트를 렌더링 하는 컴포넌트이다.
<RouterContext.Consumer> 컴포넌트를 렌더링함으로써 RouterContext를 참조한다
RouterContext의 location 객체 정보와 props로 전달받은 path 값을 비교한다. 만약 매칭이 된다면 component props로 전달받은 컴포넌트를 렌더링 하고, 아니라면 null을 렌더링 한다. 매칭 되는 경우 props로는 RouterContext와 동일한 구성의 값들(match 객체, location 객체, history 객체)을 넘겨준다.

Link 컴포넌트

리액트에서 a 태그 대신에 link 태그를 사용한다.   태그로 렌더링 되지만, preventDefault() 함수를 호출하여 태그의 기본 동작을 막는다.
태그의 기본 동작을 막은 대신 클릭 시에 RouterContext에 존재하는 history 객체를 이용하여 내비게이션을 수행하도록 구현한다. History.push 등

출처 이자 원문을 보고 싶다면 아래의 주소에서 참조해보도록 하자
https://it-eldorado.tistory.com/113