Merge pull request #154 from FRONTENDSCHOOL5/feature/follow

Feature/follow 성능 최적화
FRONTENDSCHOOL5 · Jul 20, 2023 · 0e61e03 · 0e61e03
2 parents 6be6237 + 71143f0
commit 0e61e03
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/pages/follow/Follower.jsx b/src/pages/follow/Follower.jsx
@@ -9,15 +9,19 @@ import * as S from './Follower.style';
 import { useLocation } from 'react-router-dom';
 
 function Follower() {
+  // 팔로워 데이터 및 페이지 정보 관리하는 state
   const [followers, setFollowers] = useState([]);
   const [hasMore, setHasMore] = useState(true);
   const userToken = useRecoilValue(userTokenState);
   const pageSize = 8;
   const [pageNumber, setPageNumber] = useState(0);
+
+  // 계정 이름 가져오기
   const location = useLocation();
   const accountname = location.pathname.split('/')[2];
   const skip = pageNumber * pageSize;
 
+  // 팔로워 목록 api 호출 함수
   const loadFollowers = useCallback(async () => {
     if (!hasMore) return;
 
@@ -29,7 +33,7 @@ function Follower() {
     );
 
     if (data) {
-      console.log(data);
+      // 팔로워 데이터 업데이트
       setFollowers((prevState) => [...prevState, ...data]);
       setPageNumber((prevPageNumber) => prevPageNumber + 1);
       if (data.length < pageSize) {
@@ -40,15 +44,17 @@ function Follower() {
     }
   }, [accountname, userToken, skip, pageSize, hasMore]);
 
+  // 팔로워 데이터 가져오기
   useEffect(() => {
     if (pageNumber === 0) {
       loadFollowers();
     }
   }, [loadFollowers, pageNumber]);
 
+  // 무한 스크롤 구현
   useEffect(() => {
     const handleScroll = () => {
-      // 현재 스크롤 위치가 문서의 끝에 아직 도달하지 않았을 때
+      // 문서 끝에 도달하지 않았거나 더 이상 가져올 데이터가 없을 경우
       if (
         window.innerHeight + document.documentElement.scrollTop <
           document.documentElement.offsetHeight ||
@@ -63,14 +69,20 @@ function Follower() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [loadFollowers, hasMore]);
 
+  // 불필요한 리렌더링 방지용 메모이제이션 컴포넌트
+  const MemoizedUserFollow = React.memo(UserFollow);
+
   return (
     <div>
       <TopFollowNav title="Followers" />
       <S.FollowerWrapper>
         <S.FollowerUserList>
           {followers &&
             followers.map((item, index) => (
-              <UserFollow key={`${item.accountname}-${index}`} data={item} />
+              <MemoizedUserFollow
+                key={`${item.accountname}-${index}`}
+                data={item}
+              />
             ))}
         </S.FollowerUserList>
       </S.FollowerWrapper>

diff --git a/src/pages/follow/Following.jsx b/src/pages/follow/Following.jsx
@@ -9,15 +9,19 @@ import * as S from './Following.style';
 import { useLocation } from 'react-router-dom';
 
 function Following() {
+  // 팔로잉 데이터 및 페이지 정보 관리하는 state
   const [following, setFollowing] = useState([]);
   const [hasMore, setHasMore] = useState(true);
   const userToken = useRecoilValue(userTokenState);
   const pageSize = 8;
   const [pageNumber, setPageNumber] = useState(0);
+
+  // 계정 이름 가져오기
   const location = useLocation();
   const accountname = location.pathname.split('/')[2];
   const skip = pageNumber * pageSize;
 
+  // 팔로잉 목록 api 호출 함수
   const loadFollowing = useCallback(async () => {
     if (!hasMore) return;
 
@@ -29,6 +33,7 @@ function Following() {
     );
 
     if (data) {
+      // 팔로잉 데이터 업데이트
       setFollowing((prevState) => [...prevState, ...data]);
       if (data.length < pageSize) {
         setHasMore(false);
@@ -38,10 +43,12 @@ function Following() {
     }
   }, [accountname, userToken, skip, pageSize, hasMore]);
 
+  // 팔로잉 데이터 가져오기
   useEffect(() => {
     loadFollowing(pageNumber);
   }, [loadFollowing, pageNumber]);
 
+  // 무한 스크롤 구현
   useEffect(() => {
     const handleScroll = () => {
       if (
@@ -58,14 +65,20 @@ function Following() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [hasMore]);
 
+  // 불필요한 리렌더링 방지용 메모이제이션 컴포넌트
+  const MemoizedUserFollow = React.memo(UserFollow);
+
   return (
     <div>
       <TopFollowNav title="Following" />
       <S.FollowingWrapper>
         <S.FollowingUserList>
           {following &&
             following.map((item, index) => (
-              <UserFollow key={`${item.accountname}-${index}`} data={item} />
+              <MemoizedUserFollow
+                key={`${item.accountname}-${index}`}
+                data={item}
+              />
             ))}
         </S.FollowingUserList>
       </S.FollowingWrapper>