Routing에 대해 알아보자

Jeong·2023년 8월 9일

routing

React Router

목록 보기

1/4

키워드

HTML DOM API
- Location
- pathname

최종 목표

React에서 라우팅 처리에 대해 배워보자.

현재 목표

Routing에 대해 알아보자.

🎯 Routing이란?

라우팅은 주소에 따라서 보여지는 컴포넌트를 다르게 하는 것이다.

인스타그램을 예로 들어보자. 하나의 웹 페이지는 하나의 컴포넌트를 가지고 있다. 하지만 어떤 주소로 들어가느냐에 따라 다른 내용이 보여진다.

하나의 컴포넌트 안에 있는 작은 컴포넌트들이 주소에 따라서 적절하게 바뀌기 때문이다. (라우팅)

라우팅은 웹사이트를 만들 때 필연적으로 쓰게 되는 기술 중 하나이다.

라우팅의 정확한 의미는 사용자 요청에 따라 적절한 페이지나 리소스로의 경로를 지정해주는 것 이다.

🎯 URL을 어떻게 활용할까?

라우팅으로 주소에 따라서 적절한 컴포넌트가 보이게 하면 됐다. 근데 현재 주소를 어떻게 알 수 있을까?

location 을 사용한다.

location 은 window 객체의 프로퍼티이다. 현재 웹 페이지의 URL 정보를 포함하고 있다.

💡 console에서 location을 쓰는 예시

현재 URL은https://developer.mozilla.org/ko/docs/Web/API/Location#%EC%98%88%EC%A0%9C 이다.

location.pathname // /ko/docs/Web/API/Location

location.hash // #%EC%98%88%EC%A0%9C

hash 부분이 이상한 값으로 나오는 이유

이미지로 보면 Hash 부분이 #예제 이다. 하지만 복사를 하거나 location.hash 를 하면 이상한 값이 들어있다.

볼 때만 한글로 보이는 이유는 브라우저가 인코딩을 해서 보여주기 때문이다.

브라우저는 URL을 적절히 보여주기 위해서 앞에 HTTPS를 보여주지 않는 것처럼, Hash는 인코딩해서 보여준다.

실제로 encode, decode를 해보면 브라우저가 Hash를 인코딩 해서 보여준다는 것을 확인할 수 있다.

encodeURI('예제') // %EC%98%88%EC%A0%9C
decodeURI(location.hash) // #예제

💡 App.tsx에서 location을 쓰는 예시

파일 구조

- src
  - components
    - Footer.tsx
    - Header.tsx
  - pages
    - AboutPage.tsx
    - HomePage.tsx
 - App.tsx
 - main.tsx

components/Footer.tsx

export default function Footer() {
	return (
		<footer>
			<hr />
            Footer
		</footer>
	);
}

components/Header.tsx

export default function Header() {
	return (
		<header>
			<nav>
				<ul>
					<li>
						<a href='/'>Home</a>
					</li>
					<li>
						<a href='/about'>About</a>
					</li>

				</ul>
			</nav>
		</header>
	);
}

pages/AboutPage.tsx

export default function AboutPage() {
	const path = window.location.pathname;

	return (
		<div>
			<h1>About</h1>
			<p>This is test.</p>
		</div>
	);
}

pages/HomePage.tsx

export default function HomePage() {
	const path = window.location.pathname;

	return (
		<div>
			<h1>Welcome</h1>
			<p>Hello, World!</p>
		</div>
	);
}

App.tsx

pages에 대한 type을 잡아줄 때 <string, React.Fc> 로 강제를 타입을 잡아줄 수 있다.

타입을 강제로 잡기 싫다면, Reflect.get 을 사용하면 된다.

const Page = Reflect.get(pages[path]) || HomePage;

대신 쓸 수 있는 이유는, Releact.get을 통해 속성 값을 가져올 때 속성의 타입을 추론을 하기 때문이다.

import Footer from './components/Footer';
import Header from './components/Header';

import AboutPage from './pages/AboutPage';
import HomePage from './pages/HomePage';

import type Product from './types/Product';

const pages: Record<string, React.FC> = {
	'/': HomePage,
	'/about': AboutPage,
};

export default function App({products}: {
	products: Product[];
}) {
	const path = window.location.pathname;
	const Page = pages[path] || HomePage;

	return (
		<div>
			<Header />
			<div>
				<Page />
			</div>
			<Footer />
		</div>
	);
}