React Router에서 루트 경로 생성하기

홈페이지로 이끄는 주요 경로는 다른 경로들이 그 안에서 렌더링되기 때문에 종종 루트(root route) 경로라고 불립니다. 별도의 컴포넌트로 표현하는 것이 매우 편리합니다. 따라서 우리 애플리케이션을 다시 가져와서 src 폴더 안에 또 다른 폴더를 만들고 routes라고 이름 붙이겠습니다. 이제 이 폴더에 별도의 React 컴포넌트 Root를 위한 파일 root.jsx를 생성하겠습니다. 파일의 코드는 다음과 같이 보일 것입니다:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

이제 main.jsx 파일의 코드 일부를 수정해 보겠습니다. 왜냐하면 이제 element 값으로 Root 컴포넌트를 전달할 것이고, 그 내용은 이제 별도의 파일 root.jsx에 있기 때문입니다:

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

main.jsx에서 우리 컴포넌트를 가져오는 import 문을 잊지 맙시다:

import Root from './routes/root';

이전 수업들의 과제에서 생성한 애플리케이션을 열어보세요. 이 수업에서 설명한 대로 별도의 파일 root.jsx에 별도의 React 컴포넌트 Root를 만들어 루트 경로를 위한 준비를 하세요. 여러분의 main.jsx를 수정하세요.