svelte의 3가지 특징 중에서
- Write less code
- no Virtual dom
- Truly reactive
가장 체감이 되는 부분은 아마도 reactive 즉 반응성이 아닐까 생각한다.
이 반응성이란 호출해서 어떤 액션을 발생하는 것이 아니고, 미리 어떤 값을 선언해두고, 선언된 값에 의해 상태가 변경되면 함수 등의 호출 없이 바로 특정 작동하게 하는 기능을 말한다.
물론 react나 vue에도 이런 기능이 없는 것은 아니지만, svelte만큼 간단하게 구현되지는 않는다.
자 그럼 코드를 통해서 보도록 하자.
<script>
let count = 0
$: doubled = count * 2
$: if(count >= 10) {
alert('카운트가 10을 넘었습니다. ')
count = 9
}
$: {
console.log( count )
console.log( doubled )
}
function handleClick() {
count += 1
}
</script>
<button on:click={handleClick}>
클릭수 { count } {count === 1 ? 'time' : 'times'}
</button>
<p>{count} 두배는 {doubled} <p/>위의 코드에서 주의 깊게 볼 부분은 바로 $: 기호로 시작하는 코드들이다. svelte에서는 변수 선언 혹은 조건절 등에 $: 를 작성해 주는 것으로 반응성 코드가 된다. 이부분이 매우 흥미로은 부분이다.
코드에서 실제로 이벤트를 일으키는 것은 count라는 state를 증가시키는 handleClick() 가 전부이다.
function handleClick() {
count += 1
}하지만 실제로 이 count가 증가하게 되면 상황에 따라서 다음의 3가지 이벤트가 발생하게 된다.
- doubled 라는 count * 2 변수 증가
- count가 10을 넘기면 alert 발생
- console.log 에 count, doubled 출력
물론 이것은 javascript영역에서 발생하는 이벤트 들이다. 실제 template영역에서는 count가 1이상일 때 time를 times로 변경하는 이벤트가 하나 더 있다.
3가지 이벤트 모두 count를 바라보고 있다가, count값이 변화되거나, 특정 조건에 맞을 때 발생하게 된다.
미리 선언된 state 즉 상태 값이 일종의 센서 역할을 하고 있다고 봐도 될 것이다.
이중에 흥미로운 점은 조건문 즉 if문 앞에 $: 를 입력하면 조건문도 선언형 함수처럼 사용된다는 점과, $:{ 소스코드 } 처럼 특정 특정 영역을 반응성 상태로 만들어 쓸 수 있다는 것이다. 다시한번 말하지만, 타겟 state만 정하고 바라보게만 설정하면, 개발자가 따로 호출할 필요없이 state의 변화와 조건만으로 호출이 일어난다는 것이다.
$: if(count >= 10) { // count가 해당 값 보다 크거나 같으면 다음 코드 발생
alert('카운트가 10을 넘었습니다. ')
count = 9
}
$: { // count에 변화가 있으면 발생
console.log( count )
console.log( doubled )
}
프론트엔드 개발의 경우 사용자가 어떤 액션을 취하느냐에 따라 다양한 대응을 해야하는 상황이 자주 발생한다. 또한 서버에서 쏟아지는 데이터의 상태에 따라 실시간적으로 다양한 처리를 해야하는 상황 또한 많이 발생한다.이때 svelte의 반응성 api인 $: 를 적절히 활용한다면 정말 효율적인 대응이 가능한 것이다.
물론 다시한번 말하지만 react나 vue의 경우에도 이런 기능이 없는 것은 아니다. 하지만 svelte의 장점은 이런 기능을 복잡한 프레임워크의 api로 감싸서 구현하는 것이 아니고, 단순한 기호로 구현할 수 있으므로 소스 자체가 양이 적어지는 것은 물론, 자바스크립트의 틀에서 벗어나지 않는 자연스러운 코드가 된다는 것이다.
svelte의 이 reactive (반응성) 만으로도 한번쯤 관심을 가져볼 만한 프론트엔드 프레임워크라고 생각한다.
