React Router에 라우터 추가하기

라우터에 대해 약간 익숙해졌으니, 이제 애플리케이션에 라우터를 하나 추가할 수 있습니다.

하지만 먼저 이전 수업에서 생성한 애플리케이션 템플릿을 약간 정리해야 합니다. 구체적으로는 src 폴더를 정리하겠습니다. 여기서 assets 폴더와, App.css, App.jsx 파일들을 제거하세요. 결국 그 안에는 main.jsx 와 index.css만 남게 될 것입니다.

index.css 파일을 열고 내용을 완전히 비우세요. 비어 있는 상태로 둡니다.

이제 메인 파일인 main.jsx를 처리하겠습니다. 그 안에는 다음과 같은 코드가 있을 것입니다:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

이제 라우터를 추가할 수 있습니다. 웹 애플리케이션에서 가장 흔히 사용되므로 BrowserRouter를 사용하겠습니다. 현대적인 구문도 잊지 마세요. import 문을 추가합니다:

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

그런 다음, router 상수를 만들고 import 문 아래에 우리의 BrowserRouter를 생성합니다. 메인 페이지에 'Hello Router!'라는 문구가 있는 div가 표시되도록 하겠습니다. 이를 위해 메인 페이지 경로와 표시할 요소를 지정합니다:

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

RouterProvider 컴포넌트를 추가하고 위에서 생성한 라우터를 넣어야 합니다. 이 컴포넌트는 모든 라우터 객체를 받아, 우리의 애플리케이션을 렌더링하고 다른 API들을 연결합니다:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

전체 코드는 다음과 같을 것입니다:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

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

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

변경 사항을 저장합니다. 축하합니다! 우리의 애플리케이션이 더 이상 오류를 표시하지 않습니다. 이제 애플리케이션을 실행하면 브라우저의 메인 페이지에서 'Hello Router!'를 볼 수 있습니다.

제공된 자료를 활용하여, 이전 수업의 과제로 생성한 애플리케이션의 메인 페이지에 'I'm number one in React!'라는 텍스트가 포함된 단락이 표시되도록 하세요.