[introduction] Nested components

당연하게도 다른 파일(컴포넌트)에 정의된 컴포넌트를 가져다 사용할 수 있습니다.

이번 설명에는 두개의 파일이 필요합니다.

 

우선 메인 컴포넌트인

App.svelte

<script>
	import Nested from './Nested.svelte';
</script>

<p>중첩된 컴포넌트 다른 컴포넌트를 불러와서 사용해보자</p>

<Nested />

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

메인 컴포넌트에서 호출하여 사용된

Nested.svelte

<p>Nested 컴포넌트 입니다.</p>

 

실행결과는

실행결과

 

요약 설명

• import 구문을 사용해서 Nested.svelte 파일(컴포넌트)를 선언
• <Nested/> 태그(마크업)로 사용
• <Nested/> 처럼 생성된 컴포넌트는 HTML태그와 구분하기 위해 대문자로 시작해야합니다. 
• 스타일이 적용된 범위(scope)를 확인 해보세요. App.svelte에서 선언된 스타일(<style>)은 Nested 컴포넌트에 적용되지 않았습니다. !