Redux의 판매자 페이지

이제 마무리할 일만 남았습니다. 이번 수업에서는 마지막 작업을 해보겠습니다. 우리 애플리케이션에 각 판매자별 별도 페이지를 추가하는 것입니다. 여기에는 이미 익숙한 작업들만 있을 것입니다. 시작해 봅시다.

제품이 있는 우리 애플리케이션을 열고, 그 안의 sellers 폴더를 엽니다. 이 폴더 안에 SellerPage.jsx 파일을 생성합니다. 이제 컴포넌트를 위한 SellerPage 코드를 작성해 보겠습니다:

export const SellerPage = () => {}

먼저 판매자의 id를 얻고, 이를 사용해 슬라이스에서 해당 판매자 객체를 찾아봅시다:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

다음으로, SellerPage 코드에서 판매자를 얻은 후 아래에서 모든 제품을 얻은 다음, 그 중에서 이 판매자가 게시한 제품만 선택해 봅시다:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

그런 다음 선택된 제품의 이름을 사용하여 map을 통해 목록을 생성합니다. 이 목록의 각 제품 이름은 해당 제품 페이지로 연결되는 링크가 될 것입니다:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

그리고 SellerPage 코드 마지막 부분에서 판매자 이름이 있는 제목과 이 판매자가 게시한 제품 목록을 마크업으로 반환합니다:

return (
	<div>
	<h2>Seller: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

물론 판매자 페이지에 대한 라우트도 필요합니다. App.jsx 파일을 열고 자식 라우트들 중 마지막에 추가해 봅시다:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

SellersPage.jsx 및 App.jsx에서 필요한 훅과 컴포넌트를 가져오는 것을 잊지 마세요.

애플리케이션을 실행하고, 제품을 로드한 다음, 왼쪽 메뉴에서 'Sellers' 링크를 클릭해 봅시다. 이제 판매자 이름을 클릭하여 해당 판매자 페이지에 들어갈 수 있고, 그 페이지에서 그의 모든 제품을 볼 수 있습니다. 그리고 그의 제품 중 하나를 클릭하면 해당 제품 페이지로 이동합니다.

여기서 일단은 마치겠습니다. 우리는 애플리케이션을 만들기 위한 Redux의 기초를 배웠고, 심지어 조금 더 깊이 들어가 보았습니다. 다양한 유용한 도구들을 익혔습니다. 여러분의 Redux 애플리케이션 제작을 응원합니다!

여러분의 학생 관리 애플리케이션을 엽니다. 강의 자료를 학습한 후, teachers 폴더 안에 TeacherPage.jsx 파일을 생성합니다. TeacherPage 컴포넌트 코드에서 필요한 선생님의 객체와 해당 선생님의 모든 학생들을 가져옵니다. map을 사용하여 학생 목록을 만들고, 각 학생의 성명을 해당 학생 페이지로 연결되는 링크로 만듭니다.

반환되는 마크업에는 선생님의 성명이 있는 제목, 그 아래에는 그가 가르치는 과목이 있는 더 작은 제목, 그리고 그 아래에 그의 학생 목록이 있도록 합니다.

App.jsx에서 선생님 페이지를 위한 또 다른 자식 라우트를 연결합니다.

애플리케이션을 실행하고 모든 것이 작동하는지 확인합니다.