Svelte로 글자를 바꾸자1

시작

Svelte를 이용하여 동적인 컨텐츠를 만들 수 있는 기초적인 sample을 제작해 보도록 한다.

버튼을 클릭하면, 글자가 바뀌는 예제를 통해서 변수와 UI의 바인딩, 이벤트처리에 대한 기본적인 형태를 파악해 보도록 한다.

 

일단 Svelte typescript프로 젝트를 생성한다.

madfishdev.tistory.com/31?category=855358

Svelte(Typescript) 시작

 

코딩

/src/App.svelte에 아래와 같이 코딩한다.

<script lang="ts">
	export let name: string;
	export let test = 'name';
	export const onClickButton = () => {
		test = 'change';
	}
</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>
	<p>{test}</p>
	<button on:click={onClickButton}>Change Button</button>
</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>

 

코드 설명

export let test = 'name';

 

export로 선언된 변수나 함수는 컴포넌트 외부, 내부 어디에서든 접근이 가능하고, Template(HTML) 코드에서도 직접 접근 하여 사용이 가능하다.

 

<button on:click={onClickButton}>Change Button</button>

 

이벤트는 on:xxxx와 같은 형식으로 핸드러를 등록하여 사용할 수 있다. 역시 export 선언됨 함수를 handler로 바인딩할 수 있다.

 

`npm run dev` 로 실행시켜 localhost로 접속한후 button을 누르면, 글자가 변경되는 것을 확인할 수 있다.

 

github.com/MadfishDT/svelte-basic.git 에서 코드 확인가능합니다.