firebase data 가져오기

분명 분명 나는 또 사용할 곳이 있을 것이기 때문에!!!!!!!!!!!!!!!!

 

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { getAuth, onAuthStateChanged } from "firebase/auth";

export default function Navbar() {
  const [userMail, setUserMail] = useState("");
  const [userProfileImg, setUserProfileImg] = useState("");

  useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setUserMail(user.email);
      } else {
        setUserMail(null);
      }
    });
  }, []);

  useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setUserProfileImg(user.photoURL);
      } else {
        setUserProfileImg(null);
      }
    });
  }, []);

 

생각의 발단

파이어베이스에서 값을 어떻게 가져오지?

처음에는 getAuth 와 user를 이용해 값을 가져오고 if로 값을 담았다.

 

아 if 안에서 사용하니까 return문 안에서 사용을 못하네..

일단 값을 가져오는지 안에서 console.log를 찍어보자. 잘 가져오네 필요한 key 값 이름 메모

 

값을 너무 무한대로 가져와서 에러가 났다.

그럼 useEffect로 관리를 해줘야겠네 무작정 작성

 

아 auth가 밖에 선언되어있어서 auth를 못읽는구나 useEffect 안에 넣어줘야겠다.

작성하고 보니 이 값을 담아갈 그릇이 없네.. 상태유지를 해줘야겠네 useState로 선언

 

set에 담았으니 값이 담긴 그릇을 사용해보자

응 이게되네????????????????????????????????

 

💡
import { getAuth, onAuthStateChanged } from "firebase/auth";

 

💡
useEffect(() => {   
   const auth = getAuth();   
   onAuthStateChanged(auth, (user) => {     
      if (user) {       
         setUserUid(user.uid);     
      } else {       
         setUserUid(null);      }    });