데이터가 불규칙적으로 렌더링되는 문제

PostList.jsx 전체 게시판 페이지

각각의 게시글마다 해시태그가 존재(빈 값 또는 글쓴이가 지정한 해시태그)하기 때문에 관심주제 관련 게시글들은 게시글의 해시태그와 현재 로그인한 사용자의 관심주제를 비교하여 중복되는 해시태그가 있는 게시물들을 필터링하여 렌더링하는 형식으로 구현했지만 관심주제와 관련된 게시글들이 불규칙적으로 렌더링되는 문제가 있습니다.

렌더링 됐을 때의 화면

const fetchInterestsData = async () => {
    if (user) {
      const userQuery = query(
        collection(db, 'users'),
        where('uid', '==', user.uid),
      );
      // 현재 사용자의 관심주제를 저장
      const querySnapshot = await getDocs(userQuery);
      const userDoc = querySnapshot.docs[0];

      if (userDoc) {
        setMyInterest(userDoc.data().interests);
      }

      // 전체 데이터를 불러온 후
      const allData = await fetchOrderedData('created_at', 'desc');

      if (allData.length > 0 && myInterest.length > 0) {
        const interestPosts = allData.filter(
          (post) =>
            post.tags && // post.tags값이 존재할 때 post.tags.hashTag가 실제로 배열인지 확인
            Array.isArray(post.tags.hashTag) &&
            post.tags.hashTag.some((tag) => myInterest.includes(tag)),
          // allData안의 게시글 데이터 중 tags.hashTag에 해당하는 태그값이 내 관심주제 중 하나에 포함되어 있다면
          // 그 게시글 데이터를 필터링해서 interestPosts에 저장
        );
        return interestPosts;
      }
    }
  };

useEffect(() => {
    const fetchAllData = async () => {
      const interestPosts = await fetchInterestsData();
      // 다른 게시글들도 불러오는 함수 호출

      setInterestPostData(interestPosts);
    };

    fetchAllData();
  }, [user]);

어느 부분에 문제가 있는지 찾기 위해 일부 코드를 수정하면 한두번씩 관심주제 관련 게시글이 렌더링 되기도 하고, 이때 새로고침을 하거나 페이지 이동이 있다가 돌아오면 다시 사라지는등 불규칙적인 렌더링으로 인해 정확한 문제가 무엇인지 찾고 있습니다.

devcisive / solumon-frontend

데이터가 불규칙적으로 렌더링되는 문제 #78

PostList.jsx 전체 게시판 페이지