230306 팀프로젝트 20

이셀·2023년 3월 6일

내일배움캠프 4기 - 최종 프로젝트

목록 보기

25/31

오늘은 정말... 트러블 슈팅의 날이었다....
6일 정각을 넘어가면서 해결한 새로고침시 state 값이 초기화되는 문제점과 파일명 이슈...
스불재와 억까가 난무했지만 어떻게든 해결했기 때문에 적는다.

새로고침시 state 값이 초기화가 됩니다!

내가 맡은 상세페이지부분은 왜그런지 모르겠지만 어느순간부터 새로고침을 하면 하얀화면이 나오는 문제점이 발생했다.
이 문제점은 결국 state값이 초기화가 되면서 값을 읽지 못하는 (undefined) 문제점이 발생한건데, 정말... 간단하게 풀렸다.

import { useQuery } from 'react-query';
import { collection, getDocs, orderBy, query } from 'firebase/firestore';
import { db } from '../common/firebase';

export default function usePosts() {
  return useQuery(
    'posts',
    async () => {
      // const q = collection(db, 'post');
      const q = query(
        collection(db, 'post'),
        orderBy('createdAt', 'desc')
      );
      const querySnapshot = await getDocs(q);
      const posts = querySnapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      return posts;
    },
    {
      cacheTime: 5 * 60 * 1000,
      staleTime: 2 * 60 * 1000,
    },
  );
}

상세페이지는 post페이지의 값을 가져와서 map을 사용하여 돌려주는 형태를 띄고 있는데, 이 로직을 받아서 사용한 코드는

  const thisPost = data?.filter((item) => item.id === id);
  let isMyPost = thisPost[0]?.uid === currentUser?.uid;

이 코드였다.
다만 이 코드가 선언하고 있는 currentUser부분이 currentUser값보다 상위에 있었기에 밑으로 내려주었고, 로딩되면서 빈 부분을 채워주기 위해 usePost를 사용하여 로딩중 이라는 멘트를 보여주도록 코드를 수정했다.

결과

const { data, isLoading } = usePosts();

if (isLoading) {
    return <div>로딩중</div>;
  }
  const thisPost = data?.filter((item) => item.id === id);
  let isMyPost = thisPost[0]?.uid === currentUser?.uid;

를 넣어서 새로고침시 state가 초기화되던 문제점을 잡았다.