상품 목록 페이지

상품 목록

- ProductListPage.tsx
  - useFetchProducts.ts  // 👈🏻 store로 부터 상품 목록 얻어 반환 
    - ProductsStore.ts  // 👈🏻 store 생성 
      - ApiService.ts  // 👈🏻 API 호출 모아서 관리하는 파일
  - Products.tsx  // 👈🏻 상품 목록 리스트 
    - Product.tsx // 👈🏻 개별 상품 
      - numberFormat.ts // 👈🏻 유틸리티 함수

ProductListPage.tsx

  • 상품 목록을 얻어 상품 리스트를 보여주는 페이지

useFetchProducts.ts

  • ProductsStore.ts 부터 상품목록에 대한 상태와 API 요청 함수 호출 후 상품목록을 반환하는 hook

ProductsStore.ts

  • 상품 목록에 대한 상태, API 요청 액션 함수로 구성

ApiService.ts

  • API 호출을 모아 모아서 관리하는 파일

Products.tsx

  • props로 전달받은 상품 목록 리스트 (products) 정보로 UI 구현

Product.tsx

  • props로 개별 상품의 정보로 UI구현

numberFormat.ts

  • 가격의 숫자를 읽기 좋게 보여주기 위해 유틸리티 함수 작성

export default function numberFormat(value: number) {
  return new Intl.NumberFormat().format(value);
}

📖 Intl

다국어 지원을 할 때 유용하게 쓸수 있는 Intl API

Intl.NumberFormat

  • 언어에 맞는 숫자 서식을 지원하는 객체의 생성자

카테고리 목록

- Header
  - useFetchCategories.ts  // 👈🏻 카테고리 목록 얻기
  - category.tsx  // 👈🏻 카테고리 보여주기

카테고리별 상품 목록

카테고리 ID를 얻기 위해 useSearchParams hooks 사용

  • ProductListPage.tsx 컴포넌트에서 hooks 사용

export default function ProductListPage() {
  const [params] = useSearchParams();

  const categoryId = params.get('categoryId') ?? undefined;

  // TODO : 1.상품 목록 얻기
  const { products } = useProducts({categoryId});

  // TODO : 2. 상품 목록 보여주기
  return (
    <article>
      <h2>상품 목록 페이지</h2>
      <Products products={products} />
    </article>
  );
}

전달받은 categoryId 사용하도록 변경

  • 해당 파일들에 categoryId 사용될 수 있도록 인수 전달 및 타입 지정

  • useProducts.ts

  • ProductsStore.ts

  • ApiService.ts

    • axios params 옵션을 통해 categoryId 전달

const { data } = await this.instance.get('/products', { params: { categoryId } });

🔗 참고

Previous개발 하기 전 준비Next상품 상세 페이지

Last updated