[SvelteKit] 페이지 이동 방법

| 서론

이번 포스팅에서는 Svelte(SvelteKit)에서 페이지 이동(라우팅)에 대해서 알아보려고 합니다.

Svelte(특히 SvelteKit)에서는 페이지 이동(라우팅)이 기본적으로 '내장'되어 있어서, 별도의 react-router나 vue-router과 같은 패키지를 설치할 필요가 없습니다.

그럼, 어떻게 페이지를 이동하는지 정리해봅시다!

| 기본 개념 : 파일 시스템 기반 라우팅

SvelteKit에서는 src/routes 폴더의 파일 구조가 URL 구조입니다.

src/routes/
├── +page.svelte          →  /
├── about/
│   └── +page.svelte      →  /about
└── posts/
    ├── +page.svelte      →  /posts
    └── [id]/
        └── +page.svelte  →  /posts/123

이렇게만 폴더를 구성하면 자동으로 페이지 라우팅이 됐습니다.

즉, /about으로 들어가면 about/+page.svelte가 자동으로 렌더링됩니다.

| 페이지 간 이동 방법

페이지 간 이동 방법을 위해서는 다양한 방법들이 있었는데요? 하나씩 살펴보면 다음과 같습니다.

1) <a> 태그를 사용

<a href="/about">About 페이지로 이동</a>

• SvelteKit은 내부적으로 <a>를 감지해서 클라이언트 사이드 네비게이션으로 처리합니다.

• 즉, 전체 새로고침 없이 부드럽게 이동됩니다.

2) goto() 함수 사용 (스크립트 내에서 이동)

: 페이지 이동을 코드로 제어하고 싶을 때 goto() 함수를 사용할 수 있습니다.

<script lang="ts">
	import { goto } from '$app/navigation';

	function moveToAbout() {
		goto('/about');
	}
</script>

<button on:click={moveToAbout}>About 페이지로 이동</button>

마치, goto('/about')는 React의 useNavigate('/about') 혹은 Next.js의 router.push('/about')와 같은 역할이라고 볼 수 있습니다.

3) 파라미터가 있는 동적 라우팅

: 예를 들어 /posts/[id] 구조일 때:

// src/routes/posts/[id]/+page.svelte
<script>
	export let params; // { id: '123' }
</script>

<h1>게시글 ID: {params.id}</h1>

이동은 아래처럼 가능합니다:

<a href="/posts/123">게시글 123 보기</a>
<!-- 또는 -->
<button on:click={() => goto('/posts/123')}>123번 글 보기</button>