Svelte에서 반응성을 처리하는 방법

대부분의 프런트엔드 프레임워크와 마찬가지로 Svelte는 반응형 언어입니다. 즉, 데이터 업데이트가 UI 업데이트로 바로 변환됩니다. Svelte에서 반응성이 어떻게 작동하는지 살펴보겠습니다.

Svelte를 처음 사용하는 경우 내 guide on getting started with Svelte here를 읽어보십시오.

Svelte의 반응성

가장 기본적으로 변수는 일반적으로 Svelte에서 반응적입니다. 예를 들어, 이와 같은 구성 요소를 만들면 버튼 내에 라이브 업데이트 카운터가 표시됩니다.

<script>
    let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{x}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

위에서 x는 버튼을 클릭할 때마다 1씩 증가합니다. 우리는 이것을 on:click="{addToCounter}"로 합니다. #카운터에 표시되는 {x}는 자동으로 증가하며 클릭할 때마다 새 값을 표시합니다.

그런 식으로 Svelte는 기본적으로 반응성을 제공하므로 무슨 일이 일어나고 있는지 직관적으로 이해하기가 정말 쉽습니다. Svelte는 또한 몇 가지 고급 반응성 기능을 제공합니다.

반응 계산

일부 시나리오에서는 x와 같은 값을 업데이트한 다음 계산을 수행하려고 합니다. 그런 다음 UI 내 어딘가에 표시할 수 있습니다. 예를 들어:

<script>
    let x = 0;
    let bigX = x * 2;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{bigX}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

위에서 계산된 bigX 값을 버튼 태그 내에 표시하고 싶습니다. 이 값은 x * 2 와 같아야 합니다. 버튼을 클릭하면 x가 1씩 증가하므로 bigX도 반응할 것으로 예상됩니다.

그러나 Svelte에서는 이와 같이 계산된 값이 본질적으로 반응적이지 않기 때문에 작동하지 않습니다. 따라서 bigX도 반응해야 한다고 Svelte에 알려야 합니다. 이를 위해 let를 $:로 바꿉니다.

아래 코드는 이제 x가 업데이트될 때마다 bigX를 업데이트하고 버튼 내에 표시합니다.

<script>
    let x = 0;
    $: bigX = x * 2;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{bigX}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

Svelte의 반응성 원리

Svelte는 if $: bigX = x * 2 와 우리가 bigX가 반응형이기를 원하고 x가 업데이트되는 경우에만 업데이트되어야 함을 지능적으로 이해합니다.

Svelte의 반응 블록

독립 변수 내의 무언가가 변경될 때마다 다시 실행되도록 할 수 있는 것과 같은 방식으로 블록 문에 대해 동일한 작업을 수행할 수 있습니다. 예를 들어 x가 5인지 확인하고 싶다고 가정해 보겠습니다. 다음과 같이 작성하면 아무 작업도 수행되지 않습니다.

let x = 0;
if(x === 5) {
    console.log(`x is ${x}!`);
}

const addToCounter = function() {
    ++x;
}

시작 시 x가 0이고 if 문이 한 번만 실행되기 때문입니다. x가 업데이트될 때마다 실행되도록 하려면 시작 부분에 $:를 추가합니다.

let x = 0;
$: if(x === 5) {
    console.log(`x is ${x}!`);
}

const addToCounter = function() {
    ++x;
}

중괄호 블록 문만으로 동일한 작업을 수행할 수 있습니다. 예를 들어 아래 코드 콘솔은 x가 변경될 때마다 기록합니다.

let x = 0;
$: {
    console.log(x);
}

const addToCounter = function() {
    ++x;
}

모든 프런트엔드 프레임워크 중에서 Svelte는 반응성을 가장 쉽게 만듭니다. 이 기사가 마음에 드셨다면 여기에서 더 많은 내용Svelte content을 찾을 수 있습니다.