스벨트 기본 기록

스벨트의 특징

• React와 Vue는 가상돔을 이용하여 update된 부분을 확인하고 갱신한다. 하지만 svelt는 가상돔이 없다. 가상돔과 비교하는 작업이 없이 실제돔에 반응성을 주입하여 바뀐부분만 캐치하여 갱신하기 때문에 더 빠르다.
• dependencies 없이 devDependencies로 구성되어 번들의 크기가 작다. 때문에 배포시간이 더 빠르다.
• svelt는 더 적은 양의 코드로 react와 vue와 같은 기능을 구현한다.

코드 작성

• 기본적인 Html 작성과 유사하여 매우 직관적이고 소스가 간결하다.
• <script> //javascript const msg = "Hello World"; </script> <h1><{msg}/h1> //html

데이터 바인딩

• 스크립트의 변수와 양방향 바인딩을 하려면 bind: 키워드를 붙여준다.
• <script> let msg = "a"; </script>

• 자식 컴포넌트에서 부모 컴포넌트의 변수와 바인딩을 할 때에도 bind:를 붙이면 된다.
• <Todo bind:todos={todos}>

조건문과 반복문

#은 시작, /는 끝, :는 중간이라고 생각하면 된다.

<script>
 let frutes = ["apple", "banana", "orange"];
</script>

<ul>
    {#if frutes.length === 0}
        <li>과일이 없습니다.</li>
    {:else}
        {#each frutes as frute}
            <li>{frute}</li>
        {/each}
    {/if}
</ul>