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

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

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

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

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

export 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의 셀렉터와 유사하게 리듀서를 내보낸 후 파일 끝에 두 개의 셀렉터를 생성합니다:

export const selectAllSellers = (state) => state.sellers

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

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

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

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

<NavLink to="/sellers" end>
	Sellers
</NavLink>

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

nav a.active {
	color: purple;
}

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

학생 관리 애플리케이션을 엽니다. 강의 자료를 학습한 후, teachers 폴더에 TeachersList.jsx 파일을 생성합니다. 이 컴포넌트를 사용하여 교사 목록을 표시할 것입니다. 필요한 컴포넌트와 훅을 임포트합니다.

TeachersList 컴포넌트의 코드를 작성합니다. 여기서 모든 교사를 가져오고 교사 목록 teachersToRender를 만듭니다. 이 목록의 각 줄에는 성과 이니셜, 그리고 괄호 안에 담당 과목이 표시되도록 합니다. 각 성명은 해당 교사의 개별 페이지로 연결되는 링크가 되도록 합니다. 그런 다음 컴포넌트 코드 마지막에 제목과 생성된 목록이 포함된 마크업을 반환합니다.

teachersSlice.js 파일 끝에 강의에서 보여준 것처럼 selectAllTeachers와 selectTeacherById라는 두 개의 셀렉터 함수를 생성합니다.

App.jsx에서 교사 페이지를 위한 자식 라우트를 하나 더 연결합니다.

root.jsx 파일의 메뉴에서 'Teachers'에 대한 a 태그를 강의에서 보여준 것처럼 NavLink로 바꿉니다. index.css에 스타일을 추가하여 메뉴에서 활성 링크가 강조되도록 합니다.