Svelte란?

스벨트는 자바스크립트 라이브러리 중 하나로, 리액트보다 가볍고 뷰보다 쉽다는 장점을 내세운 최신 프론트엔드 기술입니다. 강력한 기능으로 조금씩 영향력이 커져가고 있는 단계에 있습니다.

스벨트의 코드구조

스벨트 파일(.svelte)은 주로 다음과 같은 구조로 구성되어 있습니다.

<script>
//자바스크립트 영역
</script>

//마크업 영역

<style>
//css 등의 스타일 영역
</style>

그리고 스크립트 영역에서 외부 스벨트 파일로부터 캡슐화된 html, css, JS 코드를 import 받아서 사용할 수 있습니다. 이때 구성요소의 이름은 대문자로 시작하여, 일반 HTML 태그로 구별할 수 있도록 하였습니다.

// 일반 HTML 태그
<h1></h1>

// 사용자 구성 태그
<UserMade />

이벤트 핸들링

on: 이벤트

스벨트는 이벤트에 대한 응답으로 DOM을 Application 상태와 동기화 상태로 유지하기 위한 강력한 반응성 시스템을 갖고 있습니다.

<button on:click={동작시킬 함수}>

'on:' 같은 형식으로 이벤트를 표시해줍니다.

$: 이벤트

let count = 0;
$: doubled = count * 2;

'$:' 코드는 참조된 값이 변경될 때마다 이 코드를 다시 실행한다는 의미를 갖고 있습니다. 반복적으로 변수를 사용해야 할 때 유용할 수 있습니다.

export let 변수명

하위 항목으로 데이터를 전달하기 위해서는 props(properties)를 선언해야 합니다. 따라서 스크립트 태그 영역에서 export let 를 사용하여 선언을 해줍니다. 그러면 마크업 영역에서 {}의 템플릿 내부에서 해당 변수를 사용할 수 있습니다.

사용자 정의 컴포넌트

<script>
	export let name;
	export let version;
	export let speed;
	export let website;
</script>

<p>
	The <code>{name}</code> package is {speed} fast.
	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
	and <a href={website}>learn more here</a>
</p>

컴포넌트를 사용하는 페이지

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

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};

</script>

<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>

조건문

{#if true}, {:else if true} {:else}, {/if}로 감싸주면 내부 코드가 조건부 렌더링이 가능합니다.

<script>
	let user = { loggedIn: false };

	function toggle() {
		user.loggedIn = !user.loggedIn;
	}
</script>

{#if user.loggedIn}
	<button on:click={toggle}>
		Log out
	</button>
{:else}
	<button on:click={toggle}>
		Log in
	</button>
{/if}

참조링크

스벨트 튜토리얼