TIL 23.11.24 리액트 파이어 베이스 데이터 연동

이전에는 데이터 를 받고있다는걸 보여주기위해 페이크 데이터를 만들어 사용했지만

다른 팀원이 파이어 베이스 연동르 완료해 이번에는 파이어베이스를 이용해 유저 데이터를 받아와보았다

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import theme from 'styles/Theme';
import UserCard from './UserCard';
import ContentsCard from './ContentsCard';
import { auth, db } from 'firebase.js';
import { getDocs, collection, query, where } from 'firebase/firestore';
import { Link } from 'react-router-dom';

function UserInfo() {
  const [currentUser, setCurrentUser] = useState(null);
  const [userData, setUserData] = useState(null);
  const [userPosts, setUserPosts] = useState([]);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const user = auth.currentUser;
        setCurrentUser(user);

        if (user) {
          const userQuery = query(collection(db, 'users'), where('userId', '==', user.uid));
          const userSnapshot = await getDocs(userQuery);

          if (userSnapshot.docs.length > 0) {
            const userData = userSnapshot.docs[0].data();
            setUserData(userData);
          }

          const postsQuery = query(collection(db, 'feeds'), where('userId', '==', user.uid));
          const postsSnapshot = await getDocs(postsQuery);

          const postsData = postsSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
          setUserPosts(postsData);
        }
      } catch (error) {
        console.error('Error fetching user data:', error.message);
      }
    };

    fetchUserData();
  }, []);

  return (
    <>
      {userData && <UserCard user={userData} />}

      <ListWrapper2>
        내가쓴 게시글 목록
        {userPosts.map((feed) => (
          <Link to={`/feeds/${feed.feedId}`}>
            <ContentsCard key={feed.id} feed={feed} />
          </Link>
        ))}
      </ListWrapper2>
    </>
  );
}

 

데이터를 받는데 생각보다 여러가지를import 해오는게 복잡했다

아무래도 내가 만든 파일이 아닌 팀원의 파일을 해석하고 가지고 오는과정이 조금 길었다

결론 적으로는 개인정보페이지에 props를 받아 이름 이메일 MBTI 객체 정보를 받아올수있었고

 

각 아이디별 작성한 게시물도 따로 출력해올수있었다 내일은 개인정보 수정을 위해 파이어 베이스 데이터 수정을

좀더 알아봐야할거같다 팀프로젝트를 진행하니 벌써 일주일이 지나가버렸다