FireBase_useEffect를 이용하여 글 불러오기

파이어베이스를 이용해서 collection의 데이터를 불러와야 한다.

1. collection상태

먼저 collection은 회원가입시 부여되었던 uid를 이용해서 만들었고 문서 ID는 파이어베이스에서 자동으로 부여되는 아이디를 사용하였다.

why?
어차피 글 하나만 작성하고 새로운 글들은 계속해서 추가하는 방식으로 작성하기 때문에 아이디 하나에 새끼글 개념으로 작성할 것이다.

2. collection 불러오기

페이지에 들어가자마자 데이터가 나와야 하기 때문에 useEffect를 사용할 것이다.

const userAuth = getAuth();
const [dailyList, setDailyList] = useState<DocumentData>([]);
const board = collection(
          getFirestore(firebaseApp),
          `${userAuth.currentUser?.uid}`
        );

useEffect(() => {
const fetchBoard = async () => {
          const result = await getDocs(
            query(board, orderBy("timestamp", "desc"))
          );
          const boards = result?.docs.map((el) => el.data());
          setDailyList(boards);
        };
        fetchBoard();
},[])

하지만 역시 1트만에 성공할리가 없지;;;

3. 원인?

우선 데이터를 패치해오는 getDocs부분에서 에러가 났다.

그 이유는 collection의 아이디를 불러오지 못해서...

collection의 아이디는 로그인한 아이디의 uid로 이루어져있는데

const userAuth = getAuth()로는 불러와지지 않는다.

userAuth.currentUser?.uid가 undefined로 나오는 현상이 발견되었다.

4. 해결

언제나 구글링을 해보았다.

https://firebase.google.com/docs/auth/web/manage-users?hl=ko

파이어베이스 독스에서 찾아본 결과

getAuth를 쓰시려면 onAuthStateChanged를 쓰세요~

useEffect(() => {
    onAuthStateChanged(userAuth, (profile) => {
      if (profile) {
        const board = collection(
          getFirestore(firebaseApp),
          `${userAuth.currentUser?.uid}`
        );
        const fetchBoard = async () => {
          const result = await getDocs(
            query(board, orderBy("timestamp", "desc"))
          );
          const boards = result?.docs.map((el) => el.data());
          setDailyList(boards);
        };
        fetchBoard();
      } else {
        alert("로그인이 필요합니다");
      }
    });
  }, []);

코드를 변경해주었더니 잘 나오게 되었다!