Tanstack Router 사용하기 03

:D Route Matching

 

tanstack Router는 Route Tree에 정의된 순서와 상관없이 아래와 같은 순서로 라우트 매칭을 정렬한다. 

• Index Route
• Static Route (most specific to least specific)
• Dynamic Route (longest to shortest)
• Splat/Wildcard Routes

 

---

 

:D Outlets

 

중첩 라우트에서 컨텐츠를 어디에 렌더링 할지 알려주기 위한 방법이다. 즉, 아웃렛 컴포넌트는 매칭될 수 있는 자식 라우트를 렌더링 하는 데 사용한다. 라우트 트리 내 어디서든 렌더링 될 수 있으며, 매칭되는 자식 라우트가 없는 경우 null을 렌더링한다.

import { createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <div>
      <h1>My App</h1>
      <Outlet /> {/* This is where child routes will render */}
    </div>
  )
}

 

---

 

:D Navigation

 

Tanstact Router의 내비게이션에서는 API에 항상 아래 두 가지 속성이 존재함을 보장한다. 

• from : 출발지 라우트 아이디 (출발 라우트 아이디가 없다면 루트 라우트에서 출발을 가정)
• to : 도착지 라우트 아이디

 

Tanstack Router에서는 아래와 같이 다양한 네비게이션 API가 존재한다. 

<Link>컴포넌트는 유효한 href 속성을 가진 실제 <a> 태그를 렌더링하여 애플리케이션에서 동작한다. 아래와 같이 사용할 수 있다.

import { Link } from '@tanstack/react-router'

const link = <Link to="/about">About</Link>

 

또한, 아래와 같이 동적으로 사용할 수 있다. URL 내에 동적으로 변할 수 있는 세그먼트를 포함한 링크로, /posts/123와 같이 특정 게시물 ID에 따라 달라지는 경우가 이에 해당한다. 

const link = (
  <Link
    to="/blog/post/$postId"
    params={{
      postId: 'my-first-blog-post',
    }}
  >
    Blog Post
  </Link>
)

 

두 번째, useNavigationHook을 사용한 방법이다. 보통 아래와 같이 비동기 통신 후 처리가 필요한 경우를 처리할 때 사용한다. (Link 컴포넌트는 href, cmd/ctrl + 클릭 기능, 활성화/비활성화 기능 등 다양한 내장 기능을 제공하기 때문에 Link컴포넌트 사용을 더 권장한다.)

function Component() {
  const navigate = useNavigate({ from: '/posts/$postId' })

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    const response = await fetch('/posts', {
      method: 'POST',
      body: JSON.stringify({ title: 'My First Post' }),
    })

    const { id: postId } = await response.json()

    if (response.ok) {
      navigate({ to: '/posts/$postId', params: { postId } })
    }
  }
}

세 번째, <Navigate>컴포넌트가 있다. 공식문서에는 아래와 같이 <Navigate>컴포넌트를 정의하고 있다.

Renders nothing and performs an immediate client-side navigation.

 

가끔 컴포넌트가 마운트 될 때 즉시 탐색해야 하는 경우가 있을 수 있다. 이때, useEffect와 useNavigate를 사용하여 처리할 수도 있지만,

<Navigate>컴포넌트를 사용해도 같은 결과를 만들어 낼 수 있다.

function Component() {
  return <Navigate to="/posts/$postId" params={{ postId: 'my-first-post' }} />
}

 

마지막으로 Router.navigate()메서드는 Tanstack Router에서 가장 강력한 내비게이션 API로 소개되고 있다. 가장 큰 이유는 useNavigate와 달리 애플리케이션의 어느 위치에서든 라우터에 접근할 수 있기 때문이다.

 

---

 

:D Path param

 

경로 매개변수를 표현할 때에는 blog/$postId나 $postId과 같이 $문자를 접두사로 사용한다. 경로 매개변수가 포함된 라우트 파일을 만들 때에도 posts/$postId.tsx과 같이 $문자를 포함하여 파일을 생성해야 한다.

 

아래와 같이 경로 매개변수를 포함한 라우트가 정의되어 있을 때, 해당 경로에 $postId를 가져오기 위해 useParams을 사용할 수 있다. 

import { createFileRoute } from '@tanstack/react-router'

// Route 정의
const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    return fetchPost(params.postId)
  },
})

// use
function PostComponent() {
  const { postId } = Route.useParams()
  return <div>Post {postId}</div>
}

 

마지막으로, 내비게이션에서 경로 매개변수를 사용하는 방법에는 객체 스타일과 함수 스타일이 있다. 객체 스타일은 아래 코드와 같이 경로 매개변수를 객체 형태로 직접 전달할 때 사용한다. (고정된 값을 설정할 때 사용) 반대로 함수 스타일은 현재 매개변수를 수정하거나 새로 추가할 수 있다. URL에 이미 있는 매개변수를 유지하면서 새로운 매개변수를 설정할 때 유용하다.

function Component() {
  return (
    <Link to="/blog/$postId" params={{ postId: '123' }}>
      Post 123
    </Link>
  )
}

function Component() {
  return (
    <Link to="/blog/$postId" params={(prev) => ({ ...prev, postId: '123' })}>
      Post 123
    </Link>
  )
}