React Router의 라우트

라우트(Routes)는 React Router 애플리케이션의 가장 중요한 부분입니다. 지난 강의의 코드 일부를 살펴보겠습니다:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

그렇다면, 라우터를 생성할 때 함수에 전달한 객체의 속성인 path와 element는 바로 Route 객체의 속성입니다. 사실, 이 객체는 많은 속성을 가지고 있으며, 공식 문서에서 확인할 수 있습니다. 앞으로, 그중 일부가 필요할 것입니다:

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

대안적인 JSX 스타일을 사용하고 Route 컴포넌트의 props로 속성을 작성할 수도 있으며, 그러면 우리의 코드 조각은 이렇게 보일 것입니다:

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

그리고 물론, 임포트에 몇 줄을 더 추가해야 했을 것입니다:

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

이 강의에 제시된 두 스타일 모두 동등합니다. 우리는 앞으로 첫 번째 방식을 고수할 것입니다.

이전 강의의 과제에서 생성한 애플리케이션을 가져오세요. 라우터 생성을 위한 코드 조각을(이전 코드는 일단 주석 처리하고) 이 강의에 제시된 대안적인 JSX 구문을 사용하여 다시 작성해 보세요. 애플리케이션이 작동하는지 확인하세요.

모든 이전 코드를 원래 자리로 되돌리고, 새 코드는 제거하세요. 애플리케이션이 작동하는지 확인하세요.