Redux의 제품 페이지

이번 강의에서는 특정 제품에 대한 정보를 출력하기 위한 개별 페이지를 만들겠습니다.

제품 애플리케이션을 열고 products 폴더 안에 ProductPage.jsx 파일을 생성하겠습니다. 기억하시다시피, 각 제품은 고유한 id를 가지고 있습니다. 이 id 덕분에 각 제품에 대한 고유한 URL을 생성할 수 있습니다. 일반적으로 다음과 같이 생깁니다: /products/id123. 그리고 id는 해당 URL의 동적 부분에 포함됩니다 (라우팅 자체는 조금 후에 다루겠습니다).

자, 이제 ProductPage.jsx에서 빈 컴포넌트 ProductPage를 만들어 보겠습니다:

export const ProductPage = () => {}

여기서 우리가 가장 먼저 할 일은 useParams 훅을 사용하여 현재 위치한 제품 페이지 URL의 동적 부분을 추출하는 것입니다:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

다음으로, 얻은 id를 사용하여 store의 products 슬라이스에서 필요한 제품을 검색하겠습니다. 이미 익숙한 useSelector 훅을 사용합니다:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

두 훅을 파일에 임포트하는 것을 잊지 마세요:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

만약 필요한 제품이 없다면 (예를 들어, 사용자가 잘못된 주소를 입력한 경우), 그에 대한 정보를 화면에 표시하겠습니다. 이 단계에서 ProductPage 컴포넌트의 코드는 다음과 같아야 합니다:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>해당 제품이 없습니다</p>
	}
}

이제 남은 일은 얻은 제품 데이터를 마크업에 출력하는 것뿐입니다:

return (
	<div>
		<h2>{product.name}</h2>
		<p>설명: {product.desc}</p>
		<p>가격: {product.price}</p>
		<p>수량:{product.amount}</p>
	</div>
)

학생 관리 애플리케이션을 엽니다. students 폴더 안에 StudentPage.jsx 파일을 생성하고, 선택한 학생에 대한 정보를 받아와 출력하세요.

react-redux의 useSelector 훅을 사용하여 강의에서 보여준 것처럼 필요한 학생 정보를 가져오세요.

컴포넌트에서 얻은 학생 정보를 화면에 출력하세요.