inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

393

김수환

작성한 질문수 2

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();
          };
      }, []);
    }

firebase typescript react onsnapshot unsubscribe useEffect cleanup

답변 1

1

인프런 AI 인턴

안녕하세요, 인프런 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을 통한 실시간 감시를 중지시킵니다. 이해가 되셨으면 좋겠습니다!

0

김수환

image

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

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

그리고

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

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

31강 학습자료에 프롬프트가 엉뚱한것이 있어요

0

6

0

plan mode를 진행하는것에 있어서

0

7

1

클로드 코드 설치 관련

0

13

1

스타터킷 중요도에 대한 질문입니다.

0

15

1

3-13 리텐션 과제 제출합니다

0

11

1

mission12-01 guide.md파일 누락

0

14

1

슬라이드 오타

0

20

0

강의 소스 코드는 어디서 볼수 있나여?

1

30

1

전체적인 개발에 대해 문의드립니다.

1

39

1

챌린지 시작일 문의

0

39

0

17강 강의에 목데이터 첨부파일이 없습니다.

2

40

2

줄바꿈 시 \ 필수인가요?

0

43

2

2605 이후 최신 클로드코드 강의 추가 부탁드립니다.

0

48

2

커리큘럼 문서 제공받을 수 있을까요?

0

44

1

ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?

0

31

1

app logs 데이터로 쿼리 연습

0

37

2

인덱스드 엑세스타입 실무질문

0

24

2

mission 09-01 을 수행할 수 없어요

0

33

1

outputStyle 설정하는데 어디서 문제일까요?

0

29

3

test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데

0

23

2

검은화면

0

32

3

강의교환링크안열려요.....

0

34

2

영상재생에러 [확인부탁드려요!!!]

0

26

2

[과제] 연습문제 쿼리 작성했습니다!

0

29

2