React Router에서 Not Found 오류 처리

애플리케이션을 만들 때는 향후 사용 과정에서 발생할 수 있는 다양한 오류에 대비하는 것도 중요합니다. 이번 강의에서는 'Not Found' 오류를 처리하는 방법을 배워보겠습니다. 예를 들어, 사용자가 존재하지 않는 페이지로 연결되는 링크를 클릭했을 때 이런 오류가 발생할 수 있습니다.

먼저, 지난 강의에서 만든 애플리케이션을 열고 Root 컴포넌트의 마크업을 변경해 보겠습니다. 이제 애플리케이션을 실행하면 두 가지 상품 목록이 표시됩니다:

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
	);
}

export default Root;

index.css에 약간의 스타일을 추가해 보겠습니다:

body {
	font-size: 18px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

a {
	text-decoration: none;
	color: blue;
}

이제 링크들을 클릭해 보세요. 우리에게는 상품 페이지 레이아웃이 없기 때문에, 링크를 클릭하면 '404 Not Found' 오류 화면과 React Router가 기본적으로 보여주는 것보다 더 멋지고 재미있는 것을 직접 만들 수 있었을 거라는 질책만 보게 될 것입니다.

404 오류가 발생했을 때 표시될 우리만의 페이지를 만들어 보겠습니다. 이를 위해 src 폴더에 error-page-404.jsx 파일을 생성합니다.

React 컴포넌트 ErrorPage404 내부에서 오류를 포착하기 위해 useRouteError 훅을 사용하고, 콘솔에 출력해 보겠습니다:

import { useRouteError } from 'react-router-dom';

function ErrorPage404() {
	const error = useRouteError();
	console.error(error);

}

export default ErrorPage404;

다음으로, ErrorPage404 컴포넌트의 마크업에서 오류를 알리는 몇 가지 제목을 표시하고 error 객체의 statusText 및 data 속성을 출력할 것입니다 (error 객체와 그 속성들은 애플리케이션에서 링크를 클릭하면서 콘솔을 열어보면 확인할 수도 있습니다).

return (
	<div>
		<h1>안녕하세요! 여기는 오류 페이지입니다</h1>
		<h2>404 Not Found 오류</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx 파일을 열고 ErrorPage404를 가져오는 import 줄을 추가하는 것을 잊지 마세요:

import ErrorPage404 from './error-page-404';

또한 Router 객체에 errorElement 속성을 추가하세요 - 이 요소는 해당 경로에서 오류가 발생했을 때 표시됩니다. 오류 요소의 값은 우리의 ErrorPage404 컴포넌트가 될 것입니다:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
	},
]);

지난 강의 과제에서 만든 애플리케이션을 가져오세요. 메인 페이지에 강의에서 보여준 것처럼 몇 개의 링크로 구성된 목록을 추가하세요. 링크의 href 값은 /students/1 및 /students/2, 링크 텍스트는 각각 'Student1' 및 'Student2'가 되도록 하세요. 링크를 클릭했을 때 React Router가 기본적으로 보여주는 오류 화면이 나타나는지 확인하세요.

이제 별도의 404 오류 페이지를 직접 만들어 보세요. 원하는 내용을 출력해도 됩니다. 강의에서 보여준 것처럼 연결하세요. 이제 링크를 클릭했을 때 정확히 그 페이지로 이동하는지 확인하세요.