Page 39 -

예제 코드 /my-svelte-project/src/App.svelte 파일의 HTML 블록
… 생략 …
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn 3
how to build Svelte apps.</p>
</main> Hello, Svelte~!
… 생략 …

HTML 블록에서 일반 HTML 엘리먼트는 <main>, <h1>, <p> 등으로 소문자 형태의 태그로 나타냅니
다. 하지만 하위 컴포넌트를 사용할 때는 <MyView>, <Namespace.MyView>처럼 각 단어의 첫 글자

를 대문자로 하는 것이 관례입니다.

하위 컴포넌트를 다루는 상세한 방법은 7장 하위 컴포넌트 사용에서 자세히 설명하겠지만, 특징
은 간단히 살펴보고 넘어가겠습니다.
예를 들어 App.svelte 파일과 같은 경로에 MyView.svelte 파일이 있고, 코드는 다음과 같을 때

/my-svelte-project/src/MyView.svelte
<main>
저는 MyView 컴포넌트입니다. 반가워요~!
</main>

App.svelte 코드에서는 아래와 같이 MyView.svelte 파일을 임포트합니다.

예제 코드 /my-svelte-project/src/App.svelte 파일의 스크립트 블록
<script>
import MyView from "./MyView.svelte";
export let name;
</script>

<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
how to build Svelte apps.</p>
<MyView/>
</main>
… 생략 …

결과는 다음과 같습니다.

041