[React] - navigate, nested routes, outlet

들어가기에 앞서, 좋은 폴더 구조를 만드는 방법에 대해 먼저 생각해보자. 리액트는 사실 html을 잘 동작하게 해주는 라이브러리일 뿐이므로 사실상 우리가 만드는 파일의 대부분은 js 파일일 것이다. 그렇기 때문에 비슷한 js 파일들끼리 한 폴더에 묶어놓는 것이 가장 좋다.

컴포넌트 역할을 하는 js 파일은 components 폴더에, 페이지 역할을 하는 js 파일은 routes나 pages 폴더에, 자주 쓰는 함수가 들어있는 파일은 utils 폴더에... 이런 식으로 찾아쓰기 쉽게 분류해놓으면 좋다.

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

📌 useNavigate()

: React Router v6에서 제공되는 훅 중 하나로 페이지 이동 기능을 만들고 싶을 때 사용 (Link랑 비슷함)

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>/detail 페이지로 이동하는 버튼</button>
  )
}

  const handleGoBack = () => {
    navigate(-1); // 뒤로가기
  };

  const handleGoForward = () => {
    navigate(1); // 앞으로가기
  };

📌 404

: 유저가 이상한 경로로 접속했을 때

// 내가 설정한 path 이외의 모든 path
 <Route path="*" element={ <div>없는 페이지입니다.</div> } />

📌 nested routes

: 생성한 페이지의 하위 페이지를 또 생성하고 싶을 때, <Route> 안에 <Route> 넣기

// /about 생성되었다 가정
<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

위처럼 해줘도 되지만 조금 더 간단하고 직관적인 방법으로 아래처럼 할 수도 있다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

하지만 이렇게 되면 중첩된 라우팅이 렌더링 될 위치가 명확하지 않다. 이때 각각의 Route가 렌더링하는 위치를 정의하기 위해 outlet 속성을 사용한다. 만약 outlet을 지정하지 않으면, 중첩된 라우트의 내용이 어디에 렌더링되어야 하는지 결정할 수 없어서 오류가 발생할 수 있다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

function About(){
  return (
    <div>
      <h4>about 페이지</h4>
      <Outlet></Outlet>
    </div>
  )
}

위에서 import해온 <Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 역할을 한다. 따라서 /about/member로 접속시 <Outlet> 자리에 <div> 박스들이 잘 보이게 된다.