[TIL] 230722

Outlet

import { Outlet } from “react-router-dom”

중첩 Router를 통해 기본틀을 만들 수 있다.

• 사용 상황
  인증의 필요유무에 따라 인증 동작을 실행해야한다.

Aut → 각 페이지 컴포넌트가 보여져야 하는 부분에 Outlet 컴포넌트를 넣어야 한다.

import React from 'react'
import { Outlet } from 'react-router-dom'

function AutLayout() {
  return (
    <div>
        <h1>인증필요</h1>
        <Outlet />
    </div>
  )
}

export default AutLayout

Router → Outlet영역에 각 Route들에 매칭 시켜놓은 element들이 렌더링된다.

<BrowserRouter>
      <Routes>
        <Route element={<NonAuthLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/post" element={<Post />} />
          <Route path="/detailstudy/:id" element={<DetailTodo />} />
        </Route>
        <Route  element={<><Header/> <AuthLayout /> <Footer /></>}> 
          <Route path="/signin" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
        </Route>
      </Routes>
    </BrowserRouter>

아래 인증이 필요한 컴포넌트에 동일한 Header, Footer를 사용하고 싶다면 상위 라우터에 넣어주면 된다.

react-router-dom에 특정 상황에서만 다르게 디자인된 컴포넌트들을 렌더링하고 싶을 때 굉장히 유용한 것 같다. 이런 라이브러리가 있다는 것을 잘 검색하고 문서를 보는 능력이 중요한 것 같다.