Firebase 심화특강(1) : 새로고침 대응

★새로고침 시 인증여부에 따른 렌더링 방식의 이해 ★

 

(1) getAuth()

: authentication 서버로부터 사용자 인증여부 가져오는 네트워크 요청이 아님!

: getAuth는 authentication 서버에 요청할 때, 인자로 필요한 인스턴스 객체

=> getAuth는 동기적으로 동작함

 

(2) onAuthStateChanged 리스너 

: 비동기적으로 작동하는 네트워크 요청

: 사용자가 웹 사이트에 랜딩하면 가장 먼저 실행시키기 가능

 

[index.js]

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import GlobalStyle from "GlobalStyle";
import { Provider } from "react-redux";
import getStore from "redux/config/configStore";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import AuthContextProvider from "context/AuthContext";

const queryClient = new QueryClient();
const store = getStore();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <AuthContextProvider>
        <App />
        <GlobalStyle />
        <ToastContainer />
        <ReactQueryDevtools initialIsOpen={false} />
      </AuthContextProvider>
    </Provider>
  </QueryClientProvider>
);

▶ useContext를 사용해서 <AuthContextProvider>를

 <App/> 컴포넌트 코드 위에 작성 ( 모든 곳에서 사용할 수 있도록)

 

[AuthContext.jsx]

import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "firebaseApp";
import { createContext, useCallback, useEffect, useState } from "react";
import { toast } from "react-toastify";

export const AuthContext = createContext(null);

function AuthContextProvider({ children }) {
  const [init, setInit] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [isAuth, setIsAuth] = useState(!!auth.currentUser);

  const logout = useCallback(async () => {
    await signOut(auth)
      .then((result) => {
        toast.success("로그아웃 되었습니다.");
      })
      .catch((err) => toast.error(err.message));
    setCurrentUser(null);
    setIsAuth(false);
  }, []);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setIsAuth(true);
        setCurrentUser(user);
      } else {
        setIsAuth(false);
        setCurrentUser(null);
      }
      setInit(true);
    });
  }, []);

  return (
    <AuthContext.Provider
      value={{ init, isAuth, currentUser, setCurrentUser, logout }}
    >
      {children}
    </AuthContext.Provider>
  );
}

export default AuthContextProvider;

  

 

[App.jsx]

import Loader from "components/common/Loader";
import { AuthContext } from "context/AuthContext";
import { useContext } from "react";
import Router from "shared/Router";

function App() {
  const { init } = useContext(AuthContext);
  return <>{init ? <Router /> : <Loader />}</>;
}

export default App;