Redux 슬라이스에서 데이터 재사용하기

지난 수업에서 우리는 상품 추가 폼에 해당 상품을 등록하는 판매자를 선택할 수 있는 드롭다운 필드를 추가했습니다. 이제 가정해 보죠, 이 정보를 애플리케이션의 여러 다른 곳에서도 출력해야 합니다. 이를 위해 매번 코드를 복사하지 않고, 별도의 컴포넌트를 만들어 슬라이스에서 데이터를 추출하여 필요한 부분에서 출력하도록 하겠습니다.

상품 애플리케이션을 엽니다. 이제 products 폴더에 SellerOfProd.jsx 파일을 하나 더 생성해 봅시다. 먼저 필요한 상품의 슬라이스를 가져오는 데 사용할 useSelector 훅을 임포트합니다:

import { useSelector } from 'react-redux'

그런 다음 store에서 우리가 새 컴포넌트의 props로 전달할 sellerId를 기반으로 필요한 상품을 추출합니다:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

그리고 만약 해당 판매자가 있다면, 그들의 이름을 반환하고, 없다면 'unknown'을 반환합니다:

return <span>by {seller ? seller.name : 'unknown'}</span>

이제 새 컴포넌트를 ProductsList.jsx에 임포트하고 ProductsList 함수 내에서 상품 이름 제목 바로 뒤에 삽입해 봅시다. 보시다시피, 우리는 props로 id를 전달했습니다:

<SellerOfProd sellerId={product.seller} />

이제 애플리케이션을 실행하고, 새 상품을 추가한 후 목록에서 찾아보면, 판매자가 추가된 것을 볼 수 있고, 애플리케이션 시작 시 자동으로 추가된 상품에는 'unknown'이 표시될 것입니다.

잠시 다른 이야기: VS Code 에디터의 eslint가 sellerId에 대해 경고를 표시하지만 애플리케이션이 작동한다면, 일단 무시하거나 애플리케이션의 .eslintrc.cjs 파일을 열고 rules에 "react/prop-types": "off"를 추가할 수 있습니다.

물론, 우리는 상품 페이지에도 판매자 정보를 추가하고 싶을 것입니다. 이를 위해 ProductPage의 마크업에서 상품 이름 제목 뒤에 다시 이 줄을 삽입하고 모든 것이 작동하는지 확인해 봅시다:

<SellerOfProd sellerId={product.seller} />

여러분의 학생 애플리케이션을 엽니다. 강의 내용을 학습한 후, students 폴더에 TeacherForStudent 컴포넌트 파일을 생성하세요. 결과적으로 컴포넌트는 교사의 이름을 반환하고, 옆 괄호 안에는 그가 가르치는 과목을 표시해야 합니다. 필요한 교사는 useSelector 훅을 사용하여 찾으세요. 해당 학생에게 교사가 없으면 'anonym'을 출력하세요.

이전 작업에서 얻은 컴포넌트를 사용하여 학생 목록 페이지에서 각 학생에 대한 교사 데이터를 출력하세요.

이전 작업과 동일한 작업을 수행하되, 개별 학생 페이지에 대해 수행하세요.