[Svelte 튜토리얼] Part 1 - Nested components

튜토리얼 링크

이번 튜토리얼에서는 Svelte에서의 컴포넌트 사용방법을 알려줍니다.

 

.svelte 파일을 컴포넌트로 사용하려면 사용하려는 파일의 <script> 태그 안에 다음과 같은 형태로 import문을 사용해야 합니다.

 

import 컴포넌트 별칭 from "컴포넌트 파일 경로"

 

따라서 src/App.svelte 파일에 src/Nested.svelte파일을 불러오기 위해서는 App.svelte파일의 <script> 태그 안에 다음과 같은 형태로 불러오면 됩니다.

 

import Nested from './Nested.svelte';

 

이것을 적용한 App.svelte 파일은 다음과 같습니다.

 

<!-- App.svelte -->
<script>
  import Nested from './Nested.svelte';
</script>

<p>This is a paragraph.</p>

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

 

불러온 Nested 컴포넌트를 사용하려면 <Nested />의 형태로 원하는 위치에 선언하면 됩니다. 따라서 튜토리얼의 답은 다음과 같습니다.

 

<!-- App.svelte -->
<script>
  import Nested from './Nested.svelte';
</script>

<p>This is a paragraph.</p>
<Nested />

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

 

기본적인 HTML 요소(div, input 등)는 모두 소문자이기 때문에 이와 구분하기 위해서 Svelte 컴포넌트는 CamelCase를 사용합니다. 이 튜토리얼의 Nested 컴포넌트 또한 CamelCase를 따르는 것을 확인할 수 있습니다.