Recap

Auth 이후로 진행한 사항 복습!

1. 현재 Home에서 사용하고 있는 userObj는 어디에서 온 걸까?

• userObj는 Home의 props에서 온다.
• Home의 props는 Router으로부터 받는다.
• Router는 어플리케이션(App.js)으로부터 props를 받는다.

2. App은 useEffect()를 사용하여 onAuthStateChanged 관찰자로 state의 변화를 관찰한다.
   state 변화는 로그인/로그아웃 할 때 일어난다.

📍 components/App.js

function App() {
  //firebase가 프로그램을 초기화하길 기다리고 나서 isLoggedIn이 바뀌게 해야 한다.
  const [init, setInit] = useState(false);
  
  //로그인했는지 안했는지
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  //로그인한 유저 정보 담은 오브젝트 state, 디폴트 값은 일단 아무도 없으니까 null
  const [userObj, setUserObj] = useState(null);

  useEffect(() => {
    const auth = getAuth();
    //유저 변화가 있는지 listen하기: onAuthStateChanged관찰자 사용
    //onAuthStateChanged은 콜백이 필요한데, 콜백은 user이다.
    onAuthStateChanged(auth, (user) => {
      //console.log(user);
      //user가 있다면 로그인 하고, 유저 정보 업데이트
      if (user) {
        setIsLoggedIn(true);
        setUserObj(user)
      } else {
        //user가 없으면 로그인 실패
        setIsLoggedIn(true);
      }
      //그러고 나서 초기화 시켜라
      //🔥 항상 setInit();은 true가 되도록
      //🔥 왜냐하면 앱이 언제 시작하든 onAuthStateChanged()가 실행되어야 하기 때문이다.
      //앱이 준비되면 초기화 해줘야 한다.
      setInit(true);
    });
  }, []);

로그인 부분 수정

user가 있어야 로그인 할 수 있다.
흠...그러면 isLoggedIn 대신 userObj을 Boolean()에 넣어서 true/false 가져오면 되기 때문에 isLoggedIn은 굳이 없어도 된다.

📍 components/App.js

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useEffect, useState } from "react";
//절대 경로(absolute import)
//fbase에서 authService 가져오기(export로 내보냈기 때문에 {} 중괄호 쳐서 가져와야 함)
import { getAuth, onAuthStateChanged } from "firebase/auth";

function App() {
  //firebase가 프로그램을 초기화하길 기다리고 나서 isLoggedIn이 바뀌게 해야 한다.
  const [init, setInit] = useState(false);

  //🔥 isLoggedIn은 굳이 없어도 될것 같다. 
  //인증서비스의 현재 유저가 참인지 거짓인지에 따라 (로그인했는지 안했는지에 따라)state 달라짐
  //const [isLoggedIn, setIsLoggedIn] = useState(false);

  //로그인한 유저 정보 담은 오브젝트 state, 디폴트 값은 일단 아무도 없으니까 null
  const [userObj, setUserObj] = useState(null);

  //어떻게 기다릴 수 있을까? useEffect()를 사용하면 된다 ㅇㅇ!
  useEffect(() => {
    const auth = getAuth();
    //유저 변화가 있는지 listen하기: onAuthStateChanged관찰자 사용
    //onAuthStateChanged은 콜백이 필요한데, 콜백은 user이다.
    onAuthStateChanged(auth, (user) => {
      //console.log(user);
      //🔥 user가 있다면 로그인한 유저 정보 userObj에 업데이트, 로그아웃하면 null
      user ? setUserObj(user) : setUserObj(null);
      //그러고 나서 초기화 시켜라
      setInit(true);
    });
  }, []);
  //Router 렌더하기 & AppRouter에 prop 전달하기
  return (
    <>
      {/*init이 거짓이면 라우터 숨기고 초기화 중이라고 띄우기*/}
      {/*로그인한 user 정보 AppRouter로 보내기*/}
      {init ? (
        {/*🔥 아에 userObj가 있는지 없는지 불리언 값을 보내자*/}
        <AppRouter isLoggedIn={Boolean(userObj)} userObj={userObj} />
      ) : (
        "초기화중..."
      )}
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;