[Svelte] 기본 구문 및 핵심 기능 정리

🌈 Svelte 기본 구문 및 핵심 정리

Svelte.js - 완벽 가이드의 [섹션 2:: 기본 구문 및 핵심 정리]를 수강한 후에 정리한 내용이다.

1️⃣ 구조

스벨트는 Vue와 비슷하게 하나의 .svelte 파일 안에 [자바스크립트 / css / html] 을 작성한다.

<script>
</script>

<style>
</style>

<html>
</html>

2️⃣ HTML의 동적 변수 사용과 바인딩

다른 작업 없이 중괄호 { } 를 사용하여 스크립트단의 변수와 연결하여 동적 변수를 만들 수 있으며,

스벨트 문법에 따라 HTML 태그 안에 변수를 바인딩할 수도 있다.

아래 코드는 스크립트단의 변수 name과 age를 html단에 바인딩한 것이며, button에 클릭 이벤트를 주어 incrementAge라는 함수를 바인딩하였다. 또한 버튼을 누를 때마다 age가 동적으로 1씩 증가하는 것을 확인할 수 있다.

<script>
    let name = 'Jinny';
    let age = 29;

    function incrementAge() {
        age++;
    }
</script>

<h1>Hello  My name is {name}, my age is {age}!</h1>
<button on:click="{incrementAge}">Change Age</button>

3️⃣ 반응형 변수

반응형 변수란, 어떤 변수의 값이 바뀔 때마다 반응형 변수의 값을 변경시켜 주거나 이벤트를 발생시킨다.

또한, 달러 $: 표시를 변수 앞에 붙임으로써 반응형 변수를 만들 수 있고, 반응형 변수를 만들 때에는 var, let, const 같은 선언이 필요 없이 $:만 추가하여 간단히 만들 수 있다.

아래 코드는 name의 값이 바뀔 때마다 반응형 변수인 uppercaseName의 값이 변경되어 h1태그에 뿌려준다.

<script>
    let name = 'Jinny';
    let age = 29;

    $: uppercaseName = name.toUpperCase();
</script>

<h1>Hello  My name is {uppercaseName}, my age is {age}!</h1>
<input type="text" bind:value="{name}">

4️⃣ 컴포넌트 import / export 및 바인딩

ES6문법과 동일하게 자식 컴포넌트를 import 하여 부모 컴포넌트에 불러올 수 있다.

또한, 자식 컴포넌트의 이름을 HTML 태그로 사용하여 화면에 랜더 할 수 있다.

여기까지는 다른 프론트 프레임워크와 동일하다고 볼 수 있지만, 복잡한 처리 없이 자식 컴포넌트 태그에 Property 변수를 바인딩할 수 있다는 점이 스벨트의 장점이라고 생각된다.

<!-- app.svelte -->
<script>
    import ContactCard from "./ContactCard.svelte";
    ...
</script>

...
 
<ContactCard 
    userName="{name}" 
    jobTitle="{title}" 
    description="{description}" 
    userImage={image}
/>



<!-- ContactCard.svelte -->
<script>
    export let userName;
    export let jobTitle;
    export let description;
    export let userImage;
</script>

...

5️⃣ 클래스 토글

HTML 태그 내에 class: 옵션을 지정하여 클래스 토글을 할 수 있다.

아래 코드는 div 태그에 기본 클래스로 thumb를 적용하였고,

userImage의 여부에 따라 thumb-placeholder 클래스를 추가한다는 class: 옵션을 추가한 것이다.

<script>
    let userName = 'Jinny';
    let userImage = "";
</script>


<style>
.thumb {
	width: 33%;
	height: 100%;
}
.thumb-placeholder{
	background: #ccc;
}
</style>


<div class="thumb" class:thumb-placeholder="{!userImage}">
	<img src="{userImage}" alt={userName}/>
</div>

저작자표시

'Frontend > Svelte' 카테고리의 다른 글

[Svelte] 두 가지 종류의 컴포넌트 (Container VS Presentational component) (0)	2023.01.08
[Svelte] HTML에서의 조건문과 루프 방법 정리 (1)	2022.12.20
[Svelte - 완벽 가이드] 수강 시작! (2)	2022.12.14
[Svelte] Svelte 개발환경 세팅 방법 (0)	2022.12.07
[Svelte] Svelte bundle 오류 해결 방법(404: bundle...) (0)	2022.11.22