Redux에서 판매자 목록 표시하기

지난 강의에서 주요 내용을 마쳤습니다. 이제 thunk를 사용하여 서버에서 상품 목록을 가져오고 새 상품을 서버에 저장할 수 있습니다. 이제 판매자에 대해 알아보겠습니다. 우리는 판매자 데이터도 받고 있습니다. 판매자 목록을 위한 별도의 페이지를 만들어 보겠습니다.

상품 애플리케이션을 열고, 그 안에 있는 sellers 폴더를 확인합니다. 이 폴더에 SellersList.jsx 파일을 생성합니다. 여기서는 useSelector, Link 및 나중에 sellersSlice.js에 작성할 selectAllSellers 코드를 사용할 것입니다:

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

다음으로 SellersList를 생성합니다. 여기서는 useSelector 훅을 사용하여 모든 판매자를 가져온 다음, map 루프를 사용하여 판매자 목록을 위한 마크업을 생성합니다. 각 판매자 이름은 해당 상세 페이지로 연결됩니다. 마지막으로 제목과 생성된 목록이 포함된 마크업을 반환합니다:

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>Sellers:</h2>

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

그런 다음 sellersSlice.js 파일로 이동하여 productsSlice.js의 셀렉터와 유사하게 리듀서를 내보낸 후 파일 끝에 두 개의 셀렉터를 생성합니다:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

이제 목록 페이지에 대한 라우트를 설정해야 합니다. 이를 위해 App.jsx 파일을 열고 자식 라우트 배열인 children에 객체를 하나 더 추가합니다 (SellersList 컴포넌트를 임포트하는 것을 잊지 마세요):

App.jsx{
  path: '/sellers',
  element: <SellersList />,
},

메뉴의 'Sellers' 링크가 작동하도록 하려면, root.jsx 파일로 이동합니다(오랜만이네요...). a 태그를 NavLink 요소로 바꿉니다:

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

마지막으로, 메뉴에서 활성 링크가 강조 표시되고 현재 위치한 페이지를 알 수 있도록, index.css에 스타일을 추가합니다:

index.cssnav a.active {
  color: purple;
}

애플리케이션을 실행해 보겠습니다. 이제 메뉴의 'Sellers'를 클릭하여 판매자 페이지에 들어갈 수 있습니다. 물론 먼저 메뉴의 'Products'를 클릭해야 상품이 로드됩니다. 다음 강의에서는 각 판매자에 대한 개별 페이지를 만들고, 이것으로 Redux에 관한 이 학습서를 마치겠습니다.