2500326_TIL

TIL

오늘 한 일

React-Router-Dom 기능 중 Routes와 Route의 사용에 대해서 학습했다. 단순히 경로설정의 기능 정도로만 알고 있었는데 Routes안에 Route를 넣고 또 Route안에 Route를 중첩으로 사용할 수 있다는 것을 알았다(중첩라우팅).

function Layout() {
  return (
    <div>
      <Navbar />
      <main>
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

<Routes>
    <Route path="/" element={<Layout />}>
        <Route index element={<LandingPage />} />

        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
    </Route>
</Routes>

Layout 페이지가 일종의 레이아웃이 되고 하위에 3가지의 페이지가 존재하는 것이다. index로 작성되어 있는 Home이 기본 페이지로 렌더링 된다.

Layout 에서 태그를 사용하면 해당 위치에 3가지의 페이지가 렌더링 될 수 있다. Navbar와 Footer가 고정되어 있는 채로 main의 내용만 바뀌는 것이다.

내일 할 일

• 강의 섹션 3 수강완료