[myCart] 커스텀 Hook 생성 후 적용

 

반복되는 useState와 useEffect 등의 패턴을 커스텀 Hook을 만들어 사용한다.

 

 

Hook 폴더 내에 useData.js를 생성한다.

 

순수 js의 경우에는 jsx으로 안해도됨

 

import { useEffect, useState } from 'react';

import apiClient from '../utils/api-client';

const useData = (url) => {

  const [data, setData] = useState([]);

  const [error, setError] = useState('');

  useEffect(() => {

    apiClient

      .get(url)

      .then((res) => setData(res.data))

      .catch((err) => setError(err.message));

  }, []);

  return { data, error };

};

export default useData;

 

이 커스텀 Hook을 사용해서 ProductsSidebar.jsx 수정

import "./ProductsSidebar.css";

import LinkWithIcon from "../Navbar/LinkWithIcon";

import useData from "../../Hook/useData";

const ProductsSidebar = () => {

  const { data: categories, error } = useData("/category");

  return (

    <aside className="products_sidebar">

      <h2>카테고리</h2>

      <div className="category_links">

        {error && <em className="form_error">{error}</em>}

        {categories &&

          categories.map((category) => (

            <LinkWithIcon

              key={category._id}

              title={category.name}

              link={`products?category=${category.name}`}

              emoji={`http://localhost:5000/category/${category.image}`}

              sidebar={true}

            />

          ))}

      </div>

    </aside>

  );

};

export default ProductsSidebar;

 

변경 후 정상출력되는지 확인한다. 

 

마찬가지로 ProductsList.jsx에도 적용

import useData from "../../Hook/useData";

import ProductCard from "./ProductCard";

import "./ProductsList.css";

const ProductsList = () => {

  //useDate(url)이 들어가야함

  //결과(res)는 categories와, error에 담는다.

  const { data, error } = useData("/products");

  return (

    <section className="products_list_section">

      <header className="align_center products_list_header">

        <h2>상품목록</h2>

        <select name="sort" id="" className="products_sorting">

          <option value="">정렬방법</option>

          <option value="price desc">가격높은순</option>

          <option value="price asc">가격낮은순</option>

          <option value="rate desc">평점높은순</option>

          <option value="rate asc">평점낮은순</option>

        </select>

      </header>

      <div className="products_list">

        {/* 에러가 있을 경우 에러 표시 */}

        {error && <em className="form_error">{error}</em>}

        {/* products가 있을 경우 반복문으로 출력 */}

        {data.products &&

          data.products.map((product) => (

            <ProductCard

              key={product._id}

              id={product._id}

              title={product.title}

              image={product.images[0]}

              price={product.price}

              rating={product.reviews.rate}

              ratingCounts={product.reviews.counts}

              stock={product.stock}

            />

          ))}

      </div>

    </section>

  );

};

export default ProductsList;

 

 

에러없는지 확인한다.