Refactor : loadedItem함수에 useCallBack 사용, BestProduct - loading 컴포넌트 추가

codeit-bootcamp-frontend · Jun 30, 2024 · a7ce31f · a7ce31f
1 parent d4116a0
commit a7ce31f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 35 deletions.
diff --git a/src/components/Product/AllProduct.jsx b/src/components/Product/AllProduct.jsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from "react";
-import { getAllProduct } from "../../utils/http.js";
-import Pagination from "../Pagination/Pagination.jsx";
-import ItemList from "./ItemList.jsx";
-import SortOptions from "../SortOptions/SortOptions.jsx";
-import SearchForm from "../SearchForm/SearchForm.jsx";
-import Button from "../../ui/Button/LinkButton.jsx";
-import Section from "../../ui/Section/Section.jsx";
-import Loading from "../../ui/Loading/Loading.jsx";
-import styles from "./AllProduct.module.css";
+import { useState, useEffect, useCallback } from 'react';
+import { getAllProduct } from '../../utils/http.js';
+import Pagination from '../Pagination/Pagination.jsx';
+import ItemList from './ItemList.jsx';
+import SortOptions from '../SortOptions/SortOptions.jsx';
+import SearchForm from '../SearchForm/SearchForm.jsx';
+import Button from '../../ui/Button/LinkButton.jsx';
+import Section from '../../ui/Section/Section.jsx';
+import Loading from '../../ui/Loading/Loading.jsx';
+import styles from './AllProduct.module.css';
 
 const deviceSize = {
   mobile: 768,
@@ -30,32 +30,32 @@ export default function AllProduct() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [itemList, setItemList] = useState([]);
-  const [maxPage, setMaxPage] = useState("");
+  const [maxPage, setMaxPage] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [isSortOpen, setIsSortOpen] = useState(false);
   const [size, setSize] = useState(getResponseProducts());
-  const [keyword, setKeyword] = useState("");
-  const [order, setOrder] = useState("recent");
+  const [keyword, setKeyword] = useState('');
+  const [order, setOrder] = useState('recent');
 
   const showSortOptionHandler = () => {
-    setIsSortOpen((prev) => !prev);
+    setIsSortOpen(prev => !prev);
   };
 
-  const sortHandler = (e) => {
+  const sortHandler = e => {
     const sortType = e.currentTarget.dataset.type;
     setOrder(sortType);
     setIsSortOpen(false);
   };
 
-  const loadedItem = async () => {
+  const loadedItem = useCallback(async () => {
     const query = {
       currentPage,
       order,
       size,
       keyword,
     };
+    setLoading(true);
     try {
-      setLoading(true);
       const product = await getAllProduct({ query });
       const { list, totalCount } = product;
       setLoading(false);
@@ -65,9 +65,9 @@ export default function AllProduct() {
     } catch (error) {
       setError(error.message);
     }
-  };
+  }, [currentPage, order, size, keyword]);
 
-  const searchHandler = (value) => {
+  const searchHandler = value => {
     setCurrentPage(1);
     setKeyword(value);
   };
@@ -76,22 +76,22 @@ export default function AllProduct() {
     const handleResize = () => {
       setSize(getResponseProducts());
     };
-    window.addEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize);
     handleResize();
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
 
   useEffect(() => {
     loadedItem();
-  }, [currentPage, size, order, keyword]);
+  }, [loadedItem]);
 
-  const pageHandler = (page) => {
+  const pageHandler = page => {
     setCurrentPage(page);
   };
 
-  const sortText = order === "recent" ? "최신순" : "좋아요순";
+  const sortText = order === 'recent' ? '최신순' : '좋아요순';
 
   if (error) {
     return <p>{error}</p>;
@@ -121,7 +121,7 @@ export default function AllProduct() {
           <Loading className={styles.loading} />
         ) : (
           <div className={styles.listContainer}>
-            {itemList.map((list) => (
+            {itemList.map(list => (
               <ItemList key={`product-${list.id}`} {...list} />
             ))}
           </div>

diff --git a/src/components/Product/BestProduct.jsx b/src/components/Product/BestProduct.jsx
@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getFavoriteProduct } from '../../utils/http.js';
+import Loading from '../../ui/Loading/Loading.jsx';
 import Section from '../../ui/Section/Section.jsx';
 import ItemList from './ItemList';
 import styles from './BestProduct.module.css';
@@ -22,21 +23,24 @@ const getResponseProducts = () => {
 
 export default function BestProduct() {
   const [itemList, setItemList] = useState([]);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [size, setSize] = useState(getResponseProducts());
 
-  const loadedItem = async () => {
+  const loadedItem = useCallback(async () => {
     const query = {
       size,
     };
+    setLoading(true);
     try {
       const product = await getFavoriteProduct({ query });
       const { list } = product;
       setItemList(list);
+      setLoading(false);
     } catch (error) {
       setError(error.message);
     }
-  };
+  }, [size]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -47,11 +51,11 @@ export default function BestProduct() {
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, [deviceSize]);
+  }, []);
 
   useEffect(() => {
     loadedItem();
-  }, [size]);
+  }, [loadedItem]);
 
   if (error) {
     return <p>{error}</p>;
@@ -60,11 +64,15 @@ export default function BestProduct() {
   return (
     <Section>
       <h2 className={styles.title}>베스트 상품</h2>
-      <div className={styles.list}>
-        {itemList.map(list => (
-          <ItemList key={`best-products-${list.id}`} {...list} />
-        ))}
-      </div>
+      {loading ? (
+        <Loading />
+      ) : (
+        <div className={styles.list}>
+          {itemList.map(list => (
+            <ItemList key={`best-products-${list.id}`} {...list} />
+          ))}
+        </div>
+      )}
     </Section>
   );
 }