Redux에서 브라우저의 제품 페이지

지난 수업에서 우리는 제품을 위한 별도의 페이지를 만들었습니다. 이제 우리는 어떤 버튼을 클릭했을 때 우리의 페이지가 브라우저에 나타나도록 만들어야 합니다.

먼저, 페이지가 표시될 주소를 연결해 보겠습니다. 라우트를 정의하는 파일인 App.jsx를 열고, children에 또 다른 자식 라우트를 추가하세요 (ProductPage.jsx를 import하는 것을 잊지 마세요). 경로와 표시할 컴포넌트를 지정하세요:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

이제 products 폴더에 있는 ProductsList.jsx를 열고 dispProducts에 대한 코드를 조금 변경해 보겠습니다. 이제 우리에게는 각 제품에 대한 전체 정보가 있는 별도의 페이지가 있습니다. 즉, 제품 목록에서 우리는 제품 이름과 줄인 설명 텍스트만 표시할 것입니다. 또한 라우터 라이브러리의 탐색 요소인 Link를 링크 형태로 추가하여, 클릭했을 때 제품 페이지로 이동할 수 있도록 합니다. 또한 제품들을 분리하기 위해 div에 product-excerpt 클래스를 추가하세요. 이제 dispProducts에 대한 코드는 다음과 같을 것입니다:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Link를 import하세요:

import { Link } from 'react-router-dom'

그리고 index.css에서 link-btn와 product-excerpt 클래스에 대한 스타일을 추가하세요:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

마지막으로, 제품 목록 페이지로 연결되는 왼쪽 메뉴의 링크도 작동하도록 만들어서 다른 곳에서도 목록으로 들어갈 수 있게 합시다. 이를 위해 root.jsx를 열고 이 코드 줄을:

<a>Products</a>

다음으로 변경하세요:

<NavLink to="/products" end>
	Products
</NavLink>

또한 React 라우터 라이브러리에서 NavLink를 import하는 것을 잊지 마세요:

import { Outlet, NavLink } from 'react-router-dom'

우리의 애플리케이션을 실행해 보세요. 이제 우리는 보기 버튼을 클릭하여 모든 제품에 대한 정보 페이지로 나갈 수 있습니다. 새 제품을 추가해 보고 별도의 페이지에서 보기 버튼을 클릭하여 정보를 확인해 보세요. 또한 이제 제품 목록으로 돌아가려면 왼쪽 메뉴의 'Products'를 클릭하면 됩니다. 다른 페이지에 있을 때, 브라우저 주소 표시줄의 URL이 어떻게 변하는지 살펴보세요.

학생들과 함께 하는 애플리케이션을 열어 보세요. App.jsx 파일에서 학생 페이지를 위한 또 다른 자식 라우트를 생성하세요.

StudentsList.jsx 파일에서 수업에서 보여준 것처럼 dispStudents의 코드를 변경하세요.

왼쪽 메뉴의 'Students' 링크가 학생 목록 페이지로 연결되도록 만드세요. 모든 것이 작동하는지 확인하세요.

현재 어떤 페이지에 있는지에 따라 브라우저의 주소 표시줄에 있는 값이 어떻게 변하는지 살펴보세요.