[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <App.js>

 

라우팅을 하여 연결될 (렌더링 될) 컴포넌트를 설정하고, ProtectedRoute를 통해 인증된 사용자만 접근할 수 있는 컴포넌트를 구분하며,사용자 인증 상태 변화 (로그인이 되었는지)를  확인하여 로딩을 해제시키고, 인증 상태가 완료될 때까진 로딩 화면을 표시하게 한다

 

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import styled from "styled-components";
import React, { useState, useEffect } from "react";
import { auth } from "./firebase";
import ProtectedRoute from "./component/protected-route";
import Layout from "./component/layout";
import LoadingScreen from "./component/loading-screen";
import Login from "./routes/login";
import Profile from "./routes/profile";
import CreateAccount from "./routes/create-account";
import Posting from "./component/posting";
import Developer from "./component/developer";
import './App.css';
import Timeline from "./component/timeline";
import LikeNotifications from "./component/LikeNotifications";

const Wrapper = styled.div``;

//라우팅 설정
const router = createBrowserRouter([
  {
    path: "/",
    element: <ProtectedRoute><Layout /></ProtectedRoute>,
    // 인증된 사용자에게만 Layout과 그 자식 컴포넌트를 렌더링
    // Layout 컴포넌트는 다음 게시물에서 다룰 예정
    children: [
      {
        path: "",
        element: <Timeline/>,
      },
      {
        path: "alert",
        element: <LikeNotifications />,
      },
      {
        path: "profile/:userId",
        element: <Profile />,
      },
      {
        path: "posting",
        element: <Posting />,
      },
      {
        path: "developer",
        element: <Developer />,
      }
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/create-account",
    element: <CreateAccount />,
  },
]);

function App() {
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(() => {
    // auth.onAuthStateChanged로 인증 상태 확인
      setLoading(false);
      // 인증 상태를 확인한 후 로딩 상태를 종료
      // 로그인이 되어있던 안되어있던 !
    });
    return unsubscribe;
    // 구독 이벤트, 인증 상태가 변경될 때마다 실행
    // 컴포넌트 언마운트 시 이벤트 리스너 해제
  }, []);

  return (
    <Wrapper>
      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
      // 로딩 중일 때는 로딩 스크린 띄우기, 로딩 중이 아닐 때는 라우터를 렌더링하기
    </Wrapper>
  );
}

export default App;