refactor: eslint 에 통과하기 위한 불필요한 소스 수정, useEffect 관련 의존배열 처리

catchweak · Oct 10, 2024 · 83e8688 · 83e8688
1 parent 7745df1
commit 83e8688
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 51 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -12,11 +12,11 @@ const Header = ({ categories = [], currentCategory, onCategorySelect }) => {
     // Check if JWT token exists in localStorage
     const token = localStorage.getItem("accessToken");
     setIsLoggedIn(!!token);
-  }, []);
+  }, [categories, currentCategory]);
 
   // sub category 세팅
   useEffect(() => {
-    if(currentCategory == null || currentCategory == undefined) return
+    if(currentCategory === null || currentCategory === undefined) return
 
     // 선택한 item이 top category일 경우에만 sub categories 세팅
     if(currentCategory.parentCode == null) {
@@ -30,7 +30,7 @@ const Header = ({ categories = [], currentCategory, onCategorySelect }) => {
         )
       ]);
     }
-  }, [onCategorySelect]);
+  }, [onCategorySelect, categories, currentCategory]);
 
   // ****************     component event handler      **************** //
   const handleCategoryClick = (categoryParam) => {

diff --git a/src/components/HotTopicChart.js b/src/components/HotTopicChart.js
@@ -13,7 +13,6 @@ const chartLabel = {
         chart.data.datasets.forEach((dataset, i) => {
             const meta = chart.getDatasetMeta(i);
             meta.data.forEach((element, index) => {
-                const { x, y } = element.tooltipPosition();
                 const label = data.labels[index];
                 const radius = element.outerRadius * 0.7;
                 const midAngle = (element.startAngle + element.endAngle) / 2;
@@ -36,7 +35,6 @@ ChartJS.register(chartLabel);
 const HotTopicChart = ({onTopicSelect}) => {
     // ****************     init values      **************** //
     const [loading, setLoading] = useState(true);
-    const [topics, setTopics] = useState([])
     const [chartData, setChartData] = useState({
         labels: [],
         datasets: [

diff --git a/src/components/HotTopics.js b/src/components/HotTopics.js
@@ -15,7 +15,7 @@ const HotTopics = () => {
         if (page > 0) {
             fetchArticles(page, selectedTopic);
         }
-    }, [page]);
+    }, [page, selectedTopic]);
 
     const fetchArticles = (pageToFetch, topic) => {
         setLoading(true);

diff --git a/src/components/NewsSection.js b/src/components/NewsSection.js
@@ -24,7 +24,7 @@ const NewsSection = ({ title, selectedCategory }) => {
         if (page > 0) {
             fetchArticles(page, selectedCategory);
         }
-    }, [page]);
+    }, [page, selectedCategory]);
 
     const fetchArticles = (pageToFetch, category) => {
         setLoading(true);

diff --git a/src/layouts/News.js b/src/layouts/News.js
@@ -1,4 +1,3 @@
-import React, { useState, useEffect } from "react";
 import { useOutletContext } from "react-router-dom";
 import HotTopics from "../components/HotTopics";
 import NewsSection from "../components/NewsSection";

diff --git a/src/pages/Comments.js b/src/pages/Comments.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import axiosClient from '@src/utils/axiosHelper';
 import Cookies from "js-cookie";
 import { format } from 'date-fns';
@@ -10,16 +10,12 @@ const Comments = ({ articleId }) => {
     const [hasMore, setHasMore] = useState(true);
     const [loading, setLoading] = useState(true);
     const [newComment, setNewComment] = useState('');
-    const [userId, setUserID] = useState(Cookies.get('userId'));
+    const [userId] = useState(Cookies.get('userId'));
     const [commentCount, setCommentCount] = useState(0)
     const [editCommentId, setEditCommentId] = useState(null);
     const [editCommentText, setEditCommentText] = useState('');
 
-    useEffect(() => {
-        fetchComments(page);
-    }, [page]);
-
-    const fetchComments = (page) => {
+    const fetchComments = useCallback(() => {
         setLoading(true)
 
         axiosClient.get(`/api/articles/${articleId}/comments`, {
@@ -43,7 +39,11 @@ const Comments = ({ articleId }) => {
                 console.log("Error fetching comments: " + error);
                 setLoading(false)
             });
-    };
+    }, [page, articleId]);
+
+    useEffect(() => {
+        fetchComments();
+    }, [page, fetchComments]);
 
     const handleLoadMoreComments = () => {
         setPage(prevPage => prevPage + 1)

diff --git a/src/pages/NewsDetail.js b/src/pages/NewsDetail.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import { useParams } from 'react-router-dom';
 import axiosClient from "@src/utils/axiosHelper";
 import Cookies from 'js-cookie';
@@ -62,30 +62,8 @@ const NewsDetail = () => {
         });
     }
 
-    useEffect(() => {
-        axiosClient.get(`/api/articles/${id}`)
-            .then(response => {
-                setArticle(response.data);
-                setLoading(false);
-
-                checkLikeStatus();
-
-                // 10초 이상 머물렀을 때 조회수 증가 요청
-                const timer = setTimeout(() => {
-                    updateViewCount();
-                }, 10000); // 10,000 milliseconds = 10 seconds
-
-                return () => clearTimeout(timer); // Cleanup timeout on component unmount
-
-            })
-            .catch(error => {
-                console.log("Error fetching article: " + error);
-                setLoading(false);
-            });
-    }, [id]);
-
     // 조회수 증가 요청
-    const updateViewCount = () => {
+    const updateViewCount = useCallback(() => {
         const userId = Cookies.get('userId');
 
         const viewedArticles = JSON.parse(Cookies.get('viewedArticleTime') || '{}');
@@ -109,9 +87,9 @@ const NewsDetail = () => {
                     console.log("Error updating view count: " + error);
                 });
         }
-    };
+    }, [id]);
 
-    const checkLikeStatus = () => {
+    const checkLikeStatus = useCallback(() => {
         const userId = Cookies.get('userId');
 
         if (!userId || userId === "undefined") {
@@ -125,7 +103,29 @@ const NewsDetail = () => {
             .catch(error => {
                 console.log("Error checkLikeStatus: " + error);
             });
-    };
+    }, [id]);
+
+    useEffect(() => {
+        axiosClient.get(`/api/articles/${id}`)
+            .then(response => {
+                setArticle(response.data);
+                setLoading(false);
+
+                checkLikeStatus();
+
+                // 10초 이상 머물렀을 때 조회수 증가 요청
+                const timer = setTimeout(() => {
+                    updateViewCount();
+                }, 10000); // 10,000 milliseconds = 10 seconds
+
+                return () => clearTimeout(timer); // Cleanup timeout on component unmount
+
+            })
+            .catch(error => {
+                console.log("Error fetching article: " + error);
+                setLoading(false);
+            });
+    }, [id, checkLikeStatus, updateViewCount]);
 
     const handleLike = () => {
         const userId = Cookies.get('userId');

diff --git a/src/pages/Replies.js b/src/pages/Replies.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import axiosClient from '@src/utils/axiosHelper';
 import Cookies from "js-cookie";
 import { format } from 'date-fns';
@@ -9,17 +9,13 @@ const Replies = ({ commentId }) => {
     const [hasMore, setHasMore] = useState(true);
     const [loading, setLoading] = useState(true);
     const [replyText, setReplyText] = useState('');
-    const [userId, setUserID] = useState(Cookies.get('userId'));
+    const [userId] = useState(Cookies.get('userId'));
     const [isOpen, setIsOpen] = useState(false);
     const [replyCount, setReplyCount] = useState(0)
     const [editReplyId, setEditReplyId] = useState(null);
     const [editReplyText, setEditReplyText] = useState('');
 
-    useEffect(() => {
-        fetchReplies(page);
-    }, [page]);
-
-    const fetchReplies = (page) => {
+    const fetchReplies = useCallback(() => {
         setLoading(true)
         axiosClient.get(`/api/articles/${commentId}/replies`, {
             params: {
@@ -42,7 +38,11 @@ const Replies = ({ commentId }) => {
                 console.log("Error fetching replies: " + error);
                 setLoading(false)
             });
-    };
+    }, [commentId, page]);
+
+    useEffect(() => {
+        fetchReplies();
+    }, [page, fetchReplies]);
 
     const handleAddReply = () => {
         if (!userId || userId === "undefined") {