[ Firebase ] onSnapshot 을 통한 realtime 쿼리 이벤트 감지 및 useEffect 의 cleanup 기능

 

만약 내가 SNS 서비스를 만들고 있다고 생각해보면

올라오는 게시글의 등록, 수정, 삭제 상태를 실시간으로 확인할 수 있다.

 

과연 그 과정은 어떻게 이루어지는걸까?

 

firebase 에는 onSnapshot() 함수를 통해 이뤄진다.

onSnapshot 은 특정 문서나 컬렉션, 쿼리 이벤트를 감지하여 realtime 으로 이벤트 콜백 함수를 실행한다.

이를 통해 우리는 db 에 들어온 쿼리를 새로고침 없이 화면에 반영할 수 있는 것이다.

 

const postsQuery = query(
	collection(db, "posts")
    );
    
onSnapshot(postsQuery, (snapshot)=>{
	const posts = snapshot.docs.map((doc) => {
          const { post, userId, username } = doc.data();
          return {
            post,
            userId,
            username,
          };
        });
        setPost(posts);
});

 

근데 한 가지 문제점이 있다면,

onSnapshot 은 사용할 때 비용을 지불해야 한다.

유저가 실시간 타임라인을 보고 있는게 아니라 다른 화면을 보고 있다면

작동하지 않게 해주어야 비용을 절약할 수 있다.

 

useEffect 에는 cleanup 기능이 존재한다.

cleanup 기능을 통해 컴포넌트가 언마운트 될 때 ( 타임라인 컴포넌트가 화면에서 사라질 때 )

onSnapshot 이 실행되지 않도록 만들어 줄 수 있다.

 

// 기본 구조 

useEffect(() => {
	// 실행할 코드
    
    return () => {
    // 정리할 코드 (clean up)
    };
}, [의존성 배열]);

 

firebase/auth 의 Unsubscribe 를 활용해서 

더 이상 데이터를 리슨할 필요가 없으면 이벤트 콜백이 호출되지 않도록 리스너를 분리해야 한다.

useEffect(() => {
	let unsubscribe: Unsubscribe | null = null;
	...
    }
    return () => {
    unsubscribe && unsubscribe();
    };
}, []);

 

'unsubscribe'가 존재하면('unsubscribe &&') 'unsubscribe()' 를 호출하여 구독을 취소한다.

 

https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener

Cloud Firestore로 실시간 업데이트 가져오기  |  Firebase