3. 기본 문법

이번에는 Svelte의 기본 문법에 대해서 알아보자. Svelte의 기본 문법은 공식 사이트의 Tutorial에 자세히 나와 있으며 아래의 링크로 접속해서 확인할 수 있다.

 

svelte.dev/tutorial/basics

Introduction / Basics • Svelte Tutorial

 

Svelte의 자유로운 코드 스타일

 

이전 글에서 잠깐 언급한 적이 있지만 Svelte의 기본 문법은 매우 자유롭다. 3대 UI 프레임워크들은 모두 코드 작성에 최소한의 제약 사항이 있는데, Svelte의 경우에는 기본적인 제약 사항이 없다. 회사에서 주로 사용하는 VueJS의 싱글 파일 컴포넌트와 Svelte와 비교해보자.

 

아래는 VueJS의 싱글 파일 컴포넌트 소스 코드이다. 3개의 영역으로 나누어진 것을 볼 수 있다. <template>은 HTML 문서의 레이아웃을 정의하고 <script>는 데이터 모델 및 스크립트를 관리하며 <style>은 컴포넌트의 스타일을 정의한다. 아래와 같이 역할에 따라 영역이 나누어 있으니 코드의 가독성이 좋아 유지 보수가 쉽다는 장점이 있다

 

<template>
  <div>
    <h1>Hello {{ lang }} !! <h1>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        lang: 'VueJS'
      }
    }
  }
</script>

<style scoped>
  h1 {
    color: blue;
  }
</style>

 

VueJS 싱글 파일 컴포넌트에 제약 사항으로는 하나의 컴포넌트에 하나의 컨테이너 요소만 사용할 수 있다는 것이다. 위의 코드에서 <template> 영역 안에 있는 <div> 요소를 하나 더 추가하면 VueJS는 에러를 출력한다. (Vue 3에서 이 제약 사항은 없어질 예정이다.)

 

이번에는 Svelte로 동일한 페이지를 작성해보자. VueJS 보다 코드의 양이 적어진 것을 확인할 수 있다.

 

<h1> Hello {lang} !! </h1>

<script>
  const lang = 'Svelte'
</script>

<style>
  h1 {
    color: blue;
  }
</style>

 

코드의 형태만 봐서는 VueJS와 매우 흡사한 것을 알 수 있다. Svelte에 가장 큰 영향을 준 UI 프레임워크가 VueJS가 아닌가 하는 생각이 드는 부분이다. 실제로 Svelte의 대부분의 문법은 VueJS와 매우 흡사하다. 하지만 분명한 차이가 있는데, 아래의 코드를 살펴보자.

 

<h1> Hello {lang} !! </h1>
<div>
  <h2>Root container1</h2>
</div>
<div>
  <h2>Root container2</h2>
</div>
<div>
  <h2>Root container3</h2>
</div>

<script>
  const lang = 'Svelte'
</script>

<style>
  h1 {
    color: blue;
  }
</style>

 

VueJS의 경우 싱글 파일 컴포넌트 하나당 추가할 수 있는 루트 컨테이너 요소는 한 개라고 설명했다. 하지만 Svelte는 이러한 제약 사항이 없다. 몇 개의 루트 컨테이너 요소를 추가해도 Svelte에서는 정상적으로 인식하고 출력한다. Svelte는 이러한 특징이 다른 UI 프레임워크에는 없는 것이라고 주장한다. (차기 버전에서 다른 UI 프레임워크도 지원 예정)

 

Svelte는 <template> 영역을 나누지 않는다. 도화지의 빈 공간에 그림을 그리듯이 HTML 템플릿을 작성하면 그대로 화면에 출력된다. HTML 템플릿을 작성하는 데 있어 아무런 제약 사항이 없는 것이다. 이러한 특징은 Svelte를 처음 접하는 개발자들이 쉽게 익숙해질 수 있는 장점이 있지만, 큰 프로젝트를 진행할 경우 유지보수에서 어려움이 있지 않을까 하는 걱정이 드는 부분이다.

 

데이터 정의

 

Svelte에서 데이터를 정의하기 위해서는 <script> 태그 내부에서 변수를 선언한다. HTML 템플릿에서 변수를 사용하기 위해서는 중괄호로 변수명을 감싸 사용한다.

 

<태그> {변수 또는 자바스크립트 코드} </태그>

 

중괄호 내부에는 자바스크립트 문법을 사용할 수 있다. VueJS의 {{ 자바스크립트 코드 }}와 동일하다.

 

<h1> Hello {lang} !! </h1>
<p> {sveltDesc.toLowerCase()} </p>

<script>
  const lang = 'Svelte'
  const sveltDesc= 'SVELTE IS EASY !!'
</script>

<style>
  h1 {
    color: blue;
  }
</style>

 

출력 결과는 아래와 같다.

 

 

요소 속성 정의

 

HTML 요소에서 지원하는 속성들도 데이터 정의와 비슷한 방법으로 사용한다.

 

<태그명 속성={변수}>
<태그명 {속성명과 이름이 같은 변수}>

 

속성={변수} 형태로 사용하는 것이 기본이며, {속성명과 이름이 같은 변수}와 같이 약어로도 사용할 수 있다. 아래의 코드에서 <img> 태그 안에 속성이 어떻게 연결되었는지 확인해보자.

 

<div>
	<img src={src} alt={desc} {height}>
	<p>
		{title}
	</p>
</div>

<script>
	const src = 'https://snipcart.com/media/204717/svelte.png';
	const desc = 'Svelte logo.'
	const title = 'Welcom to svelte world !!'
	const height = 150
</script>

<style>
	p {
		font-size: 2.5em;
		font-weight: bold;
	}
	
	div {
		height: 400px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
</style>

 

출력 결과는 아래와 같다.

 

 

기본 스타일링 규칙

 

위에 많은 예제들에서 봤듯이 Svelte 모듈 내부에 <style> 태그를 추가하여 스타일을 정의한다. Svelte 모듈의 기본 스타일 적용 범위는 모듈 내에서만 적용된다.

 

...

<style>
	p {
		font-size: 2.5em;
		font-weight: bold;
	}
	
	div {
		height: 400px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
</style>

 

템플릿에서 HTML 태그 사용

 

프로젝트를 진행하다 보면 값에 HTML 태그를 넣어 스타일을 변경하거나 아이콘을 추가하는 등의 작업이 빈번하다. Svelte에서는 아래의 문법으로 변수나 값에 HTML 태그가 섞여있는 경우, 태그 그대로 인식할 수 있다.

 

{@html 값...}

 

아래의 코드는 Welcom 문자열의 색상을 파란색으로 변경하는 코드이다.

 

<div>
	<img src={src} alt={desc} {height}>
	<p>
		{@html title}
	</p>
</div>

<script>
	const src = 'https://snipcart.com/media/204717/svelte.png';
	const desc = 'Svelte logo.'
	const title = '<span style="color: blue">Welcom</span> to svelte world !!'
	const height = 150
</script>

<style>
	p {
		font-size: 2.5em;
		font-weight: bold;
	}
	
	div {
		height: 400px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
</style>

 

출력 결과는 아래와 같다.

 

 

Svelte 컴포넌트 추가

 

Svelte 컴포넌트는 ES6의 모듈러 문법을 사용한다. <script> 영역에 Svelte 컴포넌트를 Import 하고 <Import 이름>으로 사용할 수 있다. VueJS의 컴포넌트 사용법과 거의 유사한 것을 알 수 있다.

 

<p>This is a paragraph.</p>

<Nested/>

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

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

 

이것으로 Svelte의 기본 문법에 대해 알아보았다. 다음 글에서는 Svelte의 반응성 문법에 대해 알아보겠다.