Svelte 기본 문법 완전 정복하기! 😎

Svelte

Svelte 기본 문법 완전 정복하기! 😎

JANNNNNN 2024. 10. 27. 17:51

1. Svelte에서 $로 값의 변화를 감지하고 업데이트하는 방법

Svelte에서 $는 변수의 변화를 실시간으로 감지하고 화면에 바로 업데이트하는 역할을 해요. Svelte는 변수가 바뀌면 그 값을 다시 그려주기 때문에, 우리가 화면을 다시 새로고침할 필요가 없어요. 이 기능 덕분에 우리는 매우 간편하게 화면을 관리할 수 있게 됩니다.

Svelte는 반응형(Reactive) 프로그래밍 방식을 가지고 있어요. 즉, 변수의 값이 바뀌면 자동으로 화면에 반영돼요. 여기서 중요한 게 $입니다. $는 반응형 선언문으로, 값이 바뀌었는지 계속 감시하고, 변하면 화면을 자동으로 업데이트해줘요.

예시 코드 (숫자를 증가시키는 버튼 예시)

<script>
    let count = 0; // count는 현재 숫자를 나타내는 변수에요.

    // 버튼을 클릭하면 이 함수가 호출됩니다.
    function increment() {
        count += 1; // count 값을 1 증가시키죠.
    }
</script>

<!-- $count가 변하면, 자동으로 화면에 업데이트됩니다. -->
<p>현재 숫자: {count}</p>
<button on:click={increment}>숫자 증가</button>

if 문과 함께 사용하는 예시

여기서 if문을 사용해 특정 조건일 때만 값을 표시하게 할 수도 있어요. 예를 들어, 숫자가 10 이상일 때 "10 이상입니다!" 라는 문구를 나타내도록 할 수 있습니다.

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<p>현재 숫자: {count}</p>
{#if count >= 10}
    <p>10 이상입니다!</p>
{/if}
<button on:click={increment}>숫자 증가</button>

let count = 0: count라는 변수를 선언해요. 이 값이 바뀌면 Svelte는 화면에 변화를 감지해서 업데이트해줘요.
{count}: 중괄호 안에 변수명을 넣으면 그 값이 화면에 표시됩니다.
{#if 조건}: 조건이 참일 때만 특정 HTML을 표시하는 방식이에요. if 문이 JavaScript와 비슷하지만, HTML 안에서 사용된다는 차이가 있어요.

2. 컴포넌트 만들기, import/export로 값 전달하기

Svelte에서 코드를 효율적으로 관리하기 위해서는 컴포넌트라는 개념이 필요해요. 컴포넌트는 HTML, CSS, JavaScript가 한 곳에 모여 있는 작은 조각으로, 각각을 독립적으로 관리할 수 있어요.

외부 컴포넌트 만들기

다른 파일에서 사용할 컴포넌트를 만들어봅시다.

Child.svelte (하위 컴포넌트)

<script>
    export let name; // 상위에서 전달된 값을 받습니다.
</script>

<p>안녕하세요, {name}님!</p>

상위 컴포넌트에서 import해서 사용하기

이제 이 컴포넌트를 상위 컴포넌트에서 가져와서 사용해볼게요.

App.svelte (상위 컴포넌트)

<script>
    import Child from './Child.svelte'; // Child 컴포넌트를 가져옵니다.
</script>

<Child name="홍길동" /> <!-- name이라는 값을 넘겨줍니다. -->

export: 하위 컴포넌트에서 상위 컴포넌트로부터 값을 받으려면 export 키워드를 사용해요. 여기서는 name이라는 변수를 상위 컴포넌트에서 받을 수 있도록 export한 거죠.
import: import는 다른 파일에 있는 컴포넌트를 가져오는 역할을 해요. 파일 경로를 import 문 뒤에 써주면 됩니다.

3. Svelte에서 조건문(if/else), 반복문(each), 그리고 중괄호({}) 사용법

if/else 문법

Svelte에서 조건문은 JavaScript와 비슷하지만, HTML 안에서 사용해요. if 문 뒤에 {} 대신 #을 붙여서 구문을 시작하고, /if로 닫아줘요.

<script>
    let isLoggedIn = false;
</script>

{#if isLoggedIn}
    <p>환영합니다!</p>
{:else}
    <p>로그인 해주세요.</p>
{/if}

each 반복문

Svelte에서 배열을 반복해서 출력하고 싶을 때 each를 사용해요. 마찬가지로 JavaScript의 forEach와 비슷한 역할을 하지만, {#each}로 시작해요.

<script>
    let users = ['홍길동', '이순신', '강감찬'];
</script>

<ul>
    {#each users as user, index}
        <li>{index + 1}. {user}</li>
    {/each}
</ul>

{#each 배열 as 아이템, 인덱스}: 배열 안의 아이템을 하나씩 가져와서 출력하는 방식이에요. index는 현재 반복하는 아이템의 순번을 나타냅니다.
{}: 중괄호는 변수를 HTML 안에 넣어서 화면에 보여줄 때 사용해요.

정리

이제 Svelte의 기본 개념들을 익혔어요! Svelte에서는 $로 반응형 상태를 쉽게 관리할 수 있고, 컴포넌트를 분리해 관리할 수 있어요. 또한 조건문과 반복문을 사용해 다양한 데이터를 화면에 쉽게 그릴 수 있어요. 앞으로 이 개념들을 바탕으로 더 다양한 기능을 구현해보세요! 😊 포스트가 여러분의 Svelte 첫 걸음에 도움이 되었길 바라요! 다음 포스트에서 더 재미있는 주제로 만나요!