SvelteKit 구성 요소

작성자: Mike Neumegen

SvelteKit용 Git 기반 CMS인 CloudCannon에서 제공했습니다.

이 튜토리얼에서 SvelteKit 페이지를 더 작은 "구성 요소"로 나누는 방법을 알아보세요.

구성 요소는 SvelteKit의 핵심이므로 레이아웃에 내비게이션 바를 추가하여 구성 요소가 어떻게 작동하는지 알아보겠습니다.

첫 번째 구성요소

먼저 모든 구성 요소를 위한 집이 필요합니다. lib 내부에 src라는 디렉토리를 생성하여 /src/lib/로 끝납니다. 새lib 디렉토리 내에서 다음을 사용하여 Nav.svelte를 생성합니다.

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>

    <style lang="sass">
      nav ul {
        list-style: none;
        padding: 3px 5px;
        background: #111;

        &.alt {
          background: blue;
        }

        a {
          color: #fff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        li {
          display: inline;
        }
      }
    </style>

/src/routes/__layout.svelte 의 레이아웃에 이것을 추가해 봅시다. 먼저 파일 맨 위에 있는 모듈을 가져옵니다.

    <script>
      import Nav from '$lib/Nav.svelte';
    </script>

Svelte에서 <Widget>와 같은 대문자 태그는 구성 요소를 나타냅니다. 따라서 다음과 같이 Nav 구성 요소를 호출할 수 있습니다.

    <Nav />

모두 합치면 레이아웃은 다음과 같이 보일 것입니다.

    <script>
      import Nav from '$lib/Nav.svelte';
    </script>

    <h1>Svelte's space</h1>
    <Nav />

    <slot></slot>

    <style lang="scss">
        :global(body) {
        width: 400px;
        margin: 0 auto;
        font-family: sans-serif;
      }
    </style>

브라우저에서 새로운 내비게이션 바를 살펴보세요!

구성요소에 매개변수 전달

추가 사용자 지정을 허용하기 위해 구성 요소에 몇 가지 소품을 추가하여 한 단계 더 나아가 보겠습니다.
.alt 구성 요소의 일부로 <style>에서 지정한 사용되지 않은 Nav 스타일을 알아차렸을 수 있습니다. Nav가 이 레이아웃에서 호출될 때 alt 클래스를 적용하고 사이트의 다른 곳에서 구성 요소의 원래 버전을 계속 호출할 수 있기를 원한다고 가정해 보겠습니다. 소품을 설정하여 이를 수행할 수 있습니다.

구성 요소에서 소품을 선언하는 것으로 시작하겠습니다.

    <script>
      export let className = '';
    </script>

이는 className 소품을 이 구성 요소에 매개 변수를 전달하면 재정의되는 빈 문자열로 초기화합니다. 이제 이것을 사용하여 <ul>에 클래스를 설정할 수 있습니다.

    <ul class="{className}">

이제 전체 파일은 다음과 같습니다.

    <script>
      export let className = '';
    </script>

    <nav>
      <ul class="{className}">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>

    <style lang="scss">
      nav ul {
        list-style: none;
        padding: 3px 5px;
        background: #111;

        &.alt {
          background: blue;
        }

        a {
          color: #fff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        li {
          display: inline;
        }
      }
    </style>

이제 사이트를 볼 때 파란색 탐색 모음이 있어야 합니다. 꽤 깔끔한!

무엇 향후 계획?

다음 강의에서는 SvelteKit의 기본 템플릿을 살펴보겠습니다.