Redux의 제품 페이지

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

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

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

products/ProductPage.jsxexport const ProductPage = () => {}

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

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

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

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

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

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

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

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params

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

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

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

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