Redux 애플리케이션에 React Router 설치하기

지난 수업들에서 우리는 Redux 작업을 위한 주요 도구들을 설치했습니다. 애플리케이션에서 웹 페이지 간 탐색을 위한 라우터가 필요한 경우가 종종 있으며, 우리의 애플리케이션도 예외는 아닙니다. 이를 위해 우리는 React Router 라이브러리를 설치할 것입니다.

프로젝트를 열고 터미널에서 다음 명령어를 입력하세요:

npm install react-router-dom

조금 앞서 말씀드리자면, 우리의 Redux 애플리케이션은 전통적으로 판매자가 게시하는 제품에 관한 정보를 다룹니다. 따라서 지금 우리는 메인 컴포넌트 App를 약간 수정하고, 또한 애플리케이션에 라우팅 기능을 추가할 것입니다.

먼저 src 폴더로 들어가고, 그 다음 app 폴더로 들어가서 여기에 root.jsx 파일을 생성하세요. 이것이 우리 웹사이트의 루트가 될 것입니다: 왼쪽에는 메뉴가 있고 오른쪽에는 콘텐츠가 있을 것입니다 (현재는 여기에 제목만 있습니다):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>제품</a>
					<a>판매자</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>이것은 나의 첫 번째 Redux 앱입니다!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

그리고 컴포넌트 App를 수정하겠습니다. 먼저 그 내용을 완전히 삭제하세요. 그 다음 라우터를 위한 두 함수와 우리의 루트 컴포넌트 Root를 임포트하세요:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

임포트 아래에 라우터를 생성하고, 첫 번째 경로를 설정하며, 표시될 요소로 우리의 Root를 전달하고, 그에 따라 경로를 '/'로 설정하세요. 나중에 App에 필요한 다른 경로들도 추가할 것입니다:

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

아래에 App 함수의 코드를 작성하세요:

function App() {
	return <RouterProvider router={router} />
}

export default App

끝났습니다. 실행하세요. 다음 섹션에서는 Redux 애플리케이션 작업을 위한 컴포넌트들을 구현할 것입니다.

마지막으로, index.css에 스타일을 작성하여 약간의 미적 요소를 추가하겠습니다:

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

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

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

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

#main {
	display: flex;
	margin: 20px;
}

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

당신의 애플리케이션에 React Router를 추가하세요.

당신의 애플리케이션이 교수들이 게시하는 학생들에 관한 정보를 다루도록 하세요. 이것을 고려하여, 루트 컴포넌트 Root를 생성하세요. 수업에 설명된 대로 컴포넌트 App를 수정하세요.