React/TS study - twitter clone(1)

import { createBrowserRouter } from "react-router-dom"

const router = createBrowserRouter([

  {

    path:"/"

  }

]

App.tsx 파일에서 Router 생성하기

 

 

 

components 폴더를 생성하고  layout.tsx 생성

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

export default function Layout() {

    return (

        <>

            <Outlet />

        </>

    );

}

return으로 <><Outlet /></> 반환

 

 

 

export default function Home() {

    return <h1>Home!</h1>;

}

home.tsx  파일 생성후 작성

 

export default function Profile() {

    return <h1>Profile</h1>;

}

profile.tsx 파일 생성후 작성

 

 

 

const router = createBrowserRouter([

  {

    path:"/",

    element: <Layout />,

    children: [

      {

        path: "", // 위와 동일한 path 경로를 갖는다

        element: <Home />

      },

      {

        path: "profile",

        element: <Profile />

      }

    ],

  },

])

위에 생성한  Layout() ,  Home()  ,  Profile()  를 각각 element로 받아준다

 

 

 

function App() {

  return (

    <>

      <RouterProvider router ={router} />

    </>

  )

}

위에 만든 router를 return

 

 

 

 

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

)

return받은값은 main.tsx 를 통해서 <App />  으로 출력

 

    element: <Layout />,

은 상단에 고정된 상태로

path의 경로에 따라 URL을 가지고 element 에 적힌 return값을 출력한다.

 

 

export default function Login() {

    return <h1>create account</h1>;

}

login.tsx 파일을 생성하고 작성

 

 

const router = createBrowserRouter([

  {

    path:"/",

    element: <Layout />,

    children: [

      {

        path: "", // 위와 동일한 path 경로를 갖는다

        element: <Home />

      },

      {

        path: "profile",

        element: <Profile />

      }

    ],

  },

  {

    path: "/login",

    element: <Login />

  },

  {

    path: "/create-account",

    element: <CreateAccount />

  }

])

로그인과 회원가입 route가 Layout안에 안들어갔으면 할땐

    element: <Layout />,  의 요소이므로 children 안에 적지않고 바깥쪽에 작성

 

이런 방식으로 Layout을 로그인 했을 때만 노출하도록 설정

 

 

 

import { createGlobalStyle } from "styled-components"

import reset from "styled-reset"

const GlobalStyles = createGlobalStyle`

  ${reset}

`;

 

style components에서 가져오는 createGlobalStyle 와 reset import

 

이후 GlobalStyles  에  css를 추가해주는데 

body{

    background-color : black;

}

위와같이 나오면

 

extension 에서

vscode-styled-components 설치해주기

 

const GlobalStyles = createGlobalStyle`

  ${reset};

  body {

    background-color: black;

  }

`;

vscode-styled-components 적용모습

 

 

      <GlobalStyles />

적용한 style을 App() 에서 return시켜준다

 

 

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/create-account"

import { createGlobalStyle } from "styled-components"

import reset from "styled-reset"

const router = createBrowserRouter([

  {

    path:"/",

    element: <Layout />,

    children: [

      {

        path: "", // 위와 동일한 path 경로를 갖는다

        element: <Home />

      },

      {

        path: "profile",

        element: <Profile />

      }

    ],

  },

  {

    path: "/login",

    element: <Login />

  },

  {

    path: "/create-account",

    element: <CreateAccount />

  }

])

const GlobalStyles = createGlobalStyle`

  ${reset};

  * {

    box-sizing: border-box;

  }

  body {

    background-color: black;

    color: white;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  }

`;

function App() {

  return (

    <>

      <GlobalStyles />

      <RouterProvider router ={router} />

    </>

  )

}

export default App

App.tsx 전체코드