onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다

24.01.17 22:06 작성 조회수 174

0

제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서

발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요

어째서 제가 읽기에는

unsubscribe = ~ 온스냅샷함수 ~

.

.

.

return () => unsubscribe함수 실행

useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데

다시 온스냅샷함수를 실행?

 

제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠ

export default function Timeline() {
  const [tweets, setTweet] = useState<ITweet[]>([]);
  
  let unsubscribe: Unsubscribe | null = null;
  const fetchTweets = async () => {
    const tweetsQuery = query(
      collection(db, "tweets"),
      orderBy("createdAt", "desc"),
      limit(25)
    );
    unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => {
        const tweets = snapshot.docs.map((doc) => {
          const { tweet, createdAt, userId, username, photo } = doc.data();
          return {
            tweet,
            createdAt,
            userId,
            username,
            photo,
            id: doc.id,
          };
        });
        setTweet(tweets);
      });
    };

    useEffect(() => {
        fetchTweets();
        return () => {
            unsubscribe && unsubscribe();
          };
      }, []);
    }

답변 1

답변을 작성해보세요.

1

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.01.18

안녕하세요, 인프런 AI 인턴입니다.

김수환님, React의 useEffect 훅에서 반환하는 함수는 컴포넌트가 언마운트되거나, effect를 다시 실행하기 전에 정리(clean-up) 목적으로 사용됩니다. 걱정하지 마세요, useEffect 내부에서 반환된 함수는 온스냅샷 함수를 실행하는 것이 아니라 구독을 취소하는 unsubscribe 함수를 호출하는 것입니다.

예제 코드에서는, fetchTweets 함수 내부에서 onSnapshot 함수를 호출하여 실시간으로 데이터를 가져오고 있으며, 이 과정에서 반환받은 구독 취소 함수를 unsubscribe 변수에 할당하고 있어요. 이후, 컴포넌트가 언마운트되는 시점에 useEffect의 정리 함수인 () => unsubscribe && unsubscribe()가 호출되어 실시간 데이터 페치를 중지하게 됩니다.

즉, unsubscribe는 onSnapshot 함수를 다시 실행하는 것이 아니라, 이전에 설정한 실시간 감시를 멈추는 기능을 수행하게 됩니다. 따라서 다른 페이지에 있을 때 불필요하게 데이터 페치가 일어나는 것을 방지할 수 있게 됩니다.

아래는 과정을 각 부분별로 설명해드린 것입니다:

  1. fetchTweets 함수에서 onSnapshot 메소드를 실행하고, 이를 통해 tweets 데이터를 실시간으로 가져옵니다.
  2. onSnapshot 메소드는 구독 취소 함수를 반환하며, 이를 unsubscribe에 저장합니다.
  3. useEffect에서 fetchTweets 함수를 호출한 후, 컴포넌트 언마운트 시 실행될 정리 함수를 반환합니다.
  4. 컴포넌트가 언마운트되면 정리 함수가 실행되고, 이 함수 내에서 unsubscribe가 호출되어 실시간 데이터 페치 구독을 취소합니다.

따라서 코드는 의도한 대로 정상적으로 동작하며, 언마운트 시 onSnapshot을 통한 실시간 감시를 중지시킵니다. 이해가 되셨으면 좋겠습니다!

김수환님의 프로필

김수환

질문자

2024.01.19

image

이 부분을 이해하지 못하겠어요..

onSnapshot 메소드는 구독취소함수를 반환한다?

그리고

unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { ~ ...

이렇게 작성한 코드가 onSnapshot 메소드의 구독취소함수만을 담는다는 것도 이해하기가 어렵네요.. 어떻게 이해하면 좋을지.. 관련 문서를 찾아봐도 안나오네요 ㅠㅠ