[javascript] Svelte에서 라우팅을 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Svelte-Router 라이브러리는 Svelte 애플리케이션에서 라우팅을 처리하는 데 도움을 줍니다. 이 라이브러리를 사용하여 다음과 같이 Svelte 앱에 라우팅을 추가할 수 있습니다.

먼저, 프로젝트에 svelte-routing을 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하세요:

npm install --save svelte-routing

그런 다음, Svelte 컴포넌트를 만들고 라우팅을 설정하는 App.svelte 파일을 생성합니다. 아래는 간단한 예시입니다:

<!-- App.svelte -->

<script>
  // 필요한 라우터 함수를 불러옵니다.
  import { Router, Link, Route } from "svelte-routing";

  // 라우트에 사용될 컴포넌트를 불러옵니다.
  import Home from "./Home.svelte";
  import About from "./About.svelte";
  import NotFound from "./NotFound.svelte";
</script>

<main>
  <nav>
    <!-- 링크를 설정합니다. -->
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>

  <!-- 라우터를 설정합니다. -->
  <Router>
    <!-- 각 경로에 해당하는 컴포넌트를 설정합니다. -->
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="*" component={NotFound} />
  </Router>
</main>

<style>
  /* 스타일을 추가할 수도 있습니다. */
</style>

이제 Home.svelte, About.svelte, NotFound.svelte 등의 파일에 각각 컴포넌트를 작성하고 라우팅을 구현할 수 있습니다.

위의 예제에서는 “/” 경로로 접속하면 Home.svelte 컴포넌트가 렌더링되고, “/about” 경로로 접속하면 About.svelte 컴포넌트가 렌더링됩니다. 그리고 “/about”과 같이 설정되지 않은 경로로 접속하면 NotFound.svelte 컴포넌트가 렌더링됩니다.

이렇게 하면 Svelte 애플리케이션에서 간단한 라우팅을 구현할 수 있습니다. svelte-routing 라이브러리 문서를 참조하여 더 복잡한 라우팅을 처리하는 방법에 대해 자세히 알아보세요.