✏️ 무엇을 배웠나
1. 리액트 쿼리를 사용해 파이어베이스 데이터 가져오기
파이어스토어에서 데이터를 가져오는 코드를 줄어볼 심산으로 방법을 찾던 중 react-firebase-hook을 발견했다. 파이어베이스 코드를 커스텀훅처럼 줄여서 사용할 수 있게 해주는 라이브러리인데, 파베 코드가 확 줄어드는 효과가 있고 가독성도 좋아서 좋다 싶어 바로 사용해봤다.
const postCollection = collection(db, 'post');
const [myData] = useCollectionData(postCollection);
console.log(myData);
const { data, isLoading, error } = useQuery('myData', () => myData, {
cacheTime: 60 * 1000 * 2,
});
console.log('Qdata', data);
console.log('Qloading', isLoading);일단 파베 코드는 2줄로 줄었는데, 문제가 있다. 파베에서 가져오는 데이터 myData를 useQuery에 넘겨서 데이터를 가져오는데, 시간 차가 있다. 리액트 쿼리 'isLoading'이 false인데도 data가 undefined 상태였고, 1분 정도 기다리니 data에 파베 데이터가 들어왔다. 시간이 걸릴 부분이 없는 것 같아 보였지만, 혹시 useCollectionData라는 react-firebase-hook이 문제인가 싶어 오리저널 파베 코드로 다시 시도해봤다.
const getPostCollection = async () => {
const querySnapshot = await getDocs(collection(db, 'post'));
const data = querySnapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
return data;
};
const { data, isLoading, isError } = useQuery(
'postCollection',
getPostCollection,
);
console.log(data);
console.log('로딩 중', isLoading);오리지널 파베 코드로 짜면 코드가 확 길어진다... 일단 결과를 확인해보니까 react-firebase-hook을 사용했을 때와 달리 시간차 없이 곧바로 data에 파베 데이터가 들어왔다. 코드가 길어져서 마음에 안 들지만... 작동이 느린 게 더 마음에 안 들기 때문에 react-firebase-hook은 사용하지 않기로. 단, 단독으로 사용할 때는 무조건 활용하는 게 좋음. 파베 코드를 확 줄여줌.
결론 : 캐싱 기능과 간편한 예외처리 때문에 리액트 쿼리로 파베에 접근하려거든 그냥 오리지널 코드를 쓰는 게 낫다. 하지만 다른 라이브러리랑 조합하지 않고 단독으로 사용할 거면 react-firebase-hook을 쓰면 코드 길이 줄어서 엄청 편하다.
