Redux의 store에서 컴포넌트로 데이터 가져오기

이번 강의에서는 store의 데이터를 React 컴포넌트에 표시하겠습니다.

우리의 제품 애플리케이션을 열고, parts/products 폴더로 이동하여 ProductsList.jsx 파일을 생성하세요. 먼저, store에서 데이터를 가져오는 데 사용할 useSelector 훅을 임포트하겠습니다:

import { useSelector } from 'react-redux'

이제 store에서 제품들을 가져오겠습니다. 셀렉터 함수를 별도로 생성하지 않고, useSelector의 파라미터에 직접 코드를 작성하겠습니다:

export const ProductsList = () => {
	const products = useSelector((state) => state.products)
}

그런 다음 ProductsList 함수 본문에서 제품을 가져오는 줄 뒤에, map을 사용하여 표준 방식으로 제품들을 표시하겠습니다:

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Price: {product.price}</p>
		<p>Amount: {product.amount}</p>
	</div>
))

그리고 아래에서 다음 마크업에 dispProducts를 표시하겠습니다:

return (
	<div>
		<h2>Products</h2>
		{dispProducts}
	</div>
)

이제 우리의 제품 목록을 메인 페이지에 표시하는 일만 남았습니다. root.jsx 파일을 열고 제목을 수정하세요:

<h2>This is my first Redux app!</h2>

다음으로:

<h2>My Products App</h2>

그런 다음 파일에 ProductsList 컴포넌트를 임포트하세요:

import { ProductsList } from '../parts/products/ProductsList'

그리고 hr 닫는 태그 바로 뒤에, 아이디가 main-page인 div 안에 넣으세요:

<ProductsList />

애플리케이션을 실행하세요. 두 제품으로 구성된 우리의 목록이 메인 페이지에 성공적으로 표시됩니다.

여러분의 학생 관리 애플리케이션을 열고, students 폴더에 StudentsList.jsx 파일을 생성하세요.

강의에서 설명한 대로 useSelector 훅을 사용하여 store에서 학생 데이터를 가져오세요. map을 사용하여 상태에 있는 학생 정보의 모든 필드를 표시하세요.

생성한 StudentsList 컴포넌트를 root.jsx에 임포트하고 메인 페이지에 표시하세요. 화면에 모든 학생 정보가 표시되는지 확인하세요.