이번에 웹 프론트엔드를 건들려야 할 일이 생겨서 어떤 자바스크립트 라이브러리를 사용해서 진행을 할까 고민을 하다가 요즘 핫하다는 스벨트를 사용해서 웹 프론트엔드 작업을 진행하기로 결정해서 공부한 스벨트 사용 방법을 정리 하는 글을 작성해보려고 합니다.
변수 사용
처음에는 스벨트에서 변수를 생성해서 html에 표시하는 방법입니다.
<script>
let name ="world";
</script>
<h1>
hello {name}!!
</h1>hello world!
css 스타일 활용
<p>This is a paragraph.</p>
<style>
/* Write your CSS here */
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
html tag 활용 방법
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{string}</p>
<p>{@html string}</p>
this string contains some HTML!!!
this string contains some HTML!!!
클릭 이벤트 처리
<script>
let count = 0;
function incrementCount() {
count += 1;
}
</script>
<button on:click ={incrementCount}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>반응성 값 선언
<script>
let count = 0;
//콜백 함수 선언
function handleClick() {
count += 1;
}
// 반응성 선언
// 이런 표현식이 처음 보시지만 svelte 공식 문서에 따르면 유효한 js라고 합니다.
$: doubled = count * 2;
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>
{count} doubled is {doubled}
</p>반응성 문장 선언
<script>
let count = 0;
function handleClick() {
count += 1;
}
//이런 식으로 값이 변경될 때마다 if 문을 검사할 수 있다.
$: if (count >= 10) {
alert('count is dangerously high!');
count = 9;
}
//아니면 이런 식으로 여러 문장들의 집합을 실행시킬 수도 있다.
$: {
console.log('the count is ' + count);
alert('I SAID THE COUNT IS ' + count);
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>반응성 리스트 사용
위에 예제들 처럼 생각을 해서 svelte코드를 자게 된다면 이렇게 짜게 됩니다.
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers.push(numbers.length + 1);
}
$: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>
Add a number
</button>하지만 위 코드처럼 작성하게 되면 numbers에 변화를 감지를 못해 반응이 안됩니다.
제대로 된 코드를 보여드리겠습니다.
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers.push(numbers.length + 1);
numbers = numbers;
}
$: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>
Add a number
</button>두 코드의 차이점이 보이시나요?
6번째 줄을 보면 numbers = numbers라는 코드를 추가되었습니다.
이 코드의 차이점을 생각해 본다면 svelte는 하위 개념에 속성이 작동되서 바뀌면 반응이 제대로 되지 않는 것을 보이며 다시 한번 정의를 해줄 필요가 있습니다.
위 코드도 나쁜 코드는 아니지만 svelte 공식문서에서는 위 방법들 보다.
아래 코드를 사용하는 것을 권장합니다.
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}
$: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>
Add a number
</button>프로퍼티(props) 사용
프로퍼티란?
- 프로퍼티, props(properties의 줄임말) 라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
프로퍼티 사용 방법
app.svelte
<script> import Nested from './subMap.svelte'; </script> <Nested answer={42}/>
subMap.svelte
<script> export let answer; </script> <p>The answer is {answer}</p>
export let answer = 0;이런 식으로 전달 값이 안들어 올 경우를 대비해서 기본 값으로 정의 할 수 있습니다.
스프레드 프로퍼티
스프레드 프로퍼티란?
한번에 여러값의 프로퍼티를 전달 할 때 유용하게 사용 가능하다.
스프레드 프로퍼티 사용 방법
app.svelte
<script> import Info from './infor.svelte'; const pkg = { name: 'svelte', version: 3, speed: 'blazing', website: 'https://svelte.dev' }; </script> <Info {...pkg}/>
infor.svelte
<script> export let name; export let versions; export let speed; export let website; </script> <p> The <code>{name}</code> package is {speed} fast. Download version {versions} from <a href="https://www.npmjs.com/package/{name}">npm</a> and <a href={website}>learn more here</a> </p> <p> The <code>{$$props.name}</code> package is {$$props.speed} fast. Download version {$$props.version} from <a href="https://www.npmjs.com/package/{$$props.name}">npm</a> and <a href={$$props.website}>learn more here</a> </p>
infor.svelte 파일에서 p태그 코드를 보면 서로 조금씩 다른 코드이지만 똑같이 작동합니다.
둘의 차이점은 export된 변수를 사용한 방법과 export를 사용하지 않은 변수를 사용하는 방법입니다.
svelte에서 제공 해주는 $$props는 일반적으로 사용되지 않지만 export로 선언되지 않은 변수를 사용하기 위해서는 $$props를 사용해야합니다.
코드 작동 확인
