컴포넌트 기본 : 레이아웃 샘플 구성(여러 component 연동)

컴포넌트에 대해서 설명드리도록 하겠습니다.

svelte에서 컴포넌트는 기본적으로 .svelte로 끝나는 파입니다.

이 컴포넌트는 다음 3가지 영역을 가질 수 있습니다.

• script

• style

• html

: 컴포넌트 구조

<script>
	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>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

svelte를 포함한 대부분의 ui 프레임워크들은 컴포넌트라는 작은 단위의 영역을 만들고 그것을 필요에 따라 결합하는 식으로 결과물을 만들어 갑니다. 각각의 컴포넌트는 한번만 사용될 수 도 있고, 여러번 중복해서 사용되기도 합니다. 이것은 마치 블록 조립과 비슷하다고 생각하시면 됩니다.

• App.svelte

<script>
	import Header from './components/header.svelte'
	import Content from './components/content.svelte'
	import Bottom from './components/bottom.svelte'
</script>

<Header />
<Content />
<Bottom />

• header.svelte

<h1>Header Space</h1>

• content.svelte

<script>
import SubContent from './subContent.svelte'
</script>

<p>Content Space</p>
<SubContent /> 
<SubContent /> 
<SubContent /> 

• subContent.svelte

<span> sub content </span>

• bottom.svelte

<h2>Bottom Space</h2>

[만들면서 배우는 Svelte]

만들면서 배우는 svelte