Merge pull request #16 from sryung1225/dev

전체 성능 개선 2차 (#12)
sryung1225 · Dec 24, 2023 · 603d9c1 · 603d9c1
2 parents f93adea + c7752c1
commit 603d9c1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
+import { Unsubscribe } from 'firebase/auth';
 import {
   collection,
   limit,
   onSnapshot,
   orderBy,
   query,
 } from 'firebase/firestore';
-import { Unsubscribe } from 'firebase/auth';
 import { db } from '../firebase.ts';
 import Tweet from './tweet.tsx';
 import * as S from '../styles/timeline.ts';

diff --git a/src/components/user-timeline.tsx b/src/components/user-timeline.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
+import { Unsubscribe } from 'firebase/auth';
 import {
   collection,
-  getDocs,
   limit,
+  onSnapshot,
   orderBy,
   query,
   where,
@@ -15,30 +16,37 @@ import ITweet from '../interfaces/ITweet.ts';
 export default function UserTimeline() {
   const user = auth.currentUser;
   const [tweets, setTweets] = useState<ITweet[]>([]);
-  const fetchTweets = async () => {
-    const tweetsQuery = query(
-      collection(db, 'tweets'),
-      where('userId', '==', user?.uid),
-      orderBy('createdAt', 'desc'),
-      limit(25),
-    );
-    const snapshot = await getDocs(tweetsQuery);
-    const tweetList = snapshot.docs.map((doc) => {
-      const { userId, userName, tweet, createdAt, photo } = doc.data();
-      return {
-        userId,
-        userName,
-        tweet,
-        createdAt,
-        photo,
-        id: doc.id,
-      };
-    });
-    setTweets(tweetList);
-  };
   useEffect(() => {
+    let unsubscribe: Unsubscribe | null = null;
+    const fetchTweets = async () => {
+      const tweetsQuery = query(
+        collection(db, 'tweets'),
+        where('userId', '==', user?.uid),
+        orderBy('createdAt', 'desc'),
+        limit(25),
+      );
+      unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => {
+        const tweetList = snapshot.docs.map((doc) => {
+          const { userId, userName, tweet, createdAt, photo } = doc.data();
+          return {
+            userId,
+            userName,
+            tweet,
+            createdAt,
+            photo,
+            id: doc.id,
+          };
+        });
+        setTweets(tweetList);
+      });
+    };
     fetchTweets();
-  }, [tweets]);
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, []);
   return (
     <S.TimelineWrapper>
       {tweets.map((tweet) => (