[React + TypeScript + Vite] 트위터 클론코딩

import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import Layout from "./components/layout";
import Home from "./routes/home";
import Profile from "./routes/profile";
import Login from "./routes/Login";
import CreateAccount from './routes/CreateAccount';
import { createGlobalStyle, styled } from 'styled-components';
import reset from 'styled-reset';
import { useEffect, useState } from 'react';
import LoadingScreen from './components/Loading_screen';
import { auth } from './firebase';

const router = createBrowserRouter([
    {
        // 기본 주소에서는 layout과 home, 주소가 profile이 되면 layout과 profile 보임
        // layout에 해당하는 children 컴포넌트들을 사용할 떄
        path:"/",
        element: <Layout/>,
        children: [
            {
                path: "",
                element: <Home />,
            },
            {
                path: "profile",
                element: <Profile />,
            },
        ]
    },
    //⬇️여기서부턴 layout이 필요없을 때
    {
        path: "/login",
        element: <Login/>
    },
    {
        path: "/create_account", 
        element: <CreateAccount/>
    }
])

const GlobalStyles = createGlobalStyle`
    ${reset};
    * {
        box-sizing:border-box;
    }
    body {
        background-color: black;
        color:white;
    }
`;

const Wrapper = styled.div`
    height:100vh;
    display:flex;
    justify-content:center;

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

    const init = async() => {
        //파이어베이스 기다리기
        // setTimeout(() => setIsLoading(false), 300); 로딩 잘 뜨나 확인하려고 해봄
        await auth.authStateReady();
        setIsLoading(false);
    }
    useEffect(() => {
        init();
    }, [])
  return (
    <Wrapper>
        <GlobalStyles/>
        {isLoading ? <LoadingScreen/> : <RouterProvider router={router}/>}
        
    </Wrapper>
  )
}

export default App

import { Outlet } from "react-router-dom";


export default function Layout() {
  return (
    <>
      <h2>⬇️밑에는 주소따라 바뀜⬇️</h2>
      <Outlet /> {/* App.tsx에 있는 router에 children을 불러내기 위해서 사용 */}
    </>
  );
}

const router = createBrowserRouter

라우터를 연결하는 부분! 

컴포넌트를 import 해서 페이지를 만들어도 되지만 Outlet을 쓰는 이유는 재활용성이 높은 페이지를 만드려고 쓰는 것 같음...!

 

<Layout/>에서 파생되는 페이지들은 children으로 설정하고

<Login/>과 <CreateAccount/>는 layout과는 별개의 페이지로 사용해야하기 때문에 path를 새로 만듦!