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

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

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

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

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

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

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

parts/products/ProductsList.jsxconst 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를 표시하겠습니다:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Products</h2>
    {dispProducts}
  </div>
)

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

app/root.jsx<h2>This is my first Redux app!</h2>

다음으로:

app/root.jsx<h2>My Products App</h2>

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

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

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

app/root.jsx<ProductsList />

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