스벨트(Svelte) 에서 상태값 관리하기!

Svelte

스벨트(Svelte) 에서 상태값 관리하기!

JANNNNNN 2024. 10. 19. 15:05

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 상태값(State)을 어떻게 관리하는지에 대해서 한 번 이야기해보려고 해요! 그럼 시작해볼까요? 😊

1. 상태값(State)란?

스벨트에서의 상태값 관리

스벨트에서는 상태값이 변수로 선언되고, UI와 쉽게 연동돼요. 예를 들어, 버튼 클릭 시 숫자를 증가시키는 간단한 예제를 볼까요?

<script>
    let count = 0; // 초기 상태값
</script>

<h1>현재 클릭 수: {count}</h1>
<button on:click={() => count++}>클릭!</button>

자바스크립트에서의 상태값 관리

그렇다면 자바스크립트에서는 상태값을 어떻게 관리하고 있었을지도 같이 비교하며 알아볼게요.

가장 기본적인 방법은 변수를 사용하는 것인데요. 위에서 활용했던 버튼 클릭 시 숫자를 증가하는 예제를 자바스크립트 코드로 살펴볼게요 ㅎㅎ

let count = 0; // 초기 상태값

document.getElementById("increaseBtn").addEventListener("click", function() {
    count++;
    document.getElementById("display").innerText = count; // 상태값 업데이트
});

여기서도 버튼 클릭 시 count가 증가하고 해당 값이 화면에 업데이트됩니다. 두 방법의 개념은 비슷하지만, 스벨트는 UI와의 연동이 더 쉽고 직관적이에요. 👍

2. 상태값 변경하기

스벨트

스벨트에서는 클릭 이벤트를 통해 상태값을 쉽게 변경할 수 있어요. 예를 들어:

<script>
    let num = 0; // 상태값

    const increaseNumber = () => num++; // 클릭 시 1 증가
    const decreaseNumber = () => num--; // 클릭 시 1 감소
</script>

<button on:click={increaseNumber}>+</button>
<button on:click={decreaseNumber}>-</button>
<h1>클릭 횟수: {num}</h1>

버튼을 클릭하면 상태값이 증가하거나 감소하는 걸 쉽게 볼 수 있죠! 🎉

자바스크립트

자바스크립트에서도 유사한 방식으로 이벤트를 처리할 수 있습니다.

let num = 0; // 상태값

const increaseNumber = () => {
    num++;
    document.getElementById("display").innerText = num; // 화면 업데이트
};

const decreaseNumber = () => {
    num--;
    document.getElementById("display").innerText = num; // 화면 업데이트
};

document.getElementById("increaseBtn").addEventListener("click", increaseNumber);
document.getElementById("decreaseBtn").addEventListener("click", decreaseNumber);

여기서도 상태값이 버튼 클릭에 따라 변화하며, 화면에 반영됩니다. 두 방법 모두 클릭 이벤트를 통해 상태를 제어할 수 있지만, 코드의 길이와 난이도에서 스벨트가 더 간결하죠! ✨

3. 객체를 통한 상태 관리

스벨트

스벨트에서는 객체를 사용하여 여러 속성을 함께 관리할 수 있습니다. 다음은 아티스트 정보를 관리하는 예제입니다.

<script>
    let artist = {
        name: '진',
        age: 31,
        height: 179,
        group: '방탄소년단',
        img: 'https://image.url/artist.jpg'
    }
</script>

<h1>이름: {artist.name}</h1>
<h1>나이: {artist.age}</h1>
<h1>키: {artist.height}</h1>
<h1>소속 그룹: {artist.group}</h1>
<img src={artist.img} alt="아티스트 이미지"/>

여기서 객체의 각 속성을 쉽게 출력할 수 있어요. 👍

자바스크립트

자바스크립트에서도 객체를 사용할 수 있습니다.

let artist = {
    name: '진',
    age: 31,
    height: 179,
    group: '방탄소년단'
};

// 아티스트 정보를 업데이트하는 함수
function updateArtist(newName, newAge) {
    artist.name = newName;
    artist.age = newAge;
}

updateArtist('김석진', 32); // 이름과 나이 업데이트

두 언어 모두 객체를 사용해 여러 데이터를 그룹화할 수 있지만, 스벨트는 UI와 자연스럽게 연결되기 때문에 상태 관리가 더 간편하답니다! 🌟

4. 배열로 상태값 반복하기

스벨트

스벨트에서는 배열의 각 항목을 반복해서 출력할 수 있어요.

<script>
    let bts = [
        {name: 'RM(김남준)', birth: 1994, img: 'https://image.url/rm.jpg'},
        {name: '진(김석진)', birth: 1992, img: 'https://image.url/jin.jpg'},
    ];

</script>

{#each bts as member}
    <h3><img src="{member.img}" alt="{member.name}"/></h3>
    <h3>이름: {member.name}</h3>
    <h3>출생: {member.birth}</h3>
    <hr />
{/each}

여기서 {#each}{/each} 문법을 통해 배열의 각 항목을 쉽게 반복하여 표시할 수 있어요!

자바스크립트

자바스크립트에서도 배열을 사용하여 여러 정보를 반복적으로 출력할 수 있습니다.

let bts = [
    {name: 'RM', birth: 1994, img: 'https://image.url/rm.jpg'},
    {name: '진', birth: 1992, img: 'https://image.url/jin.jpg'},
];

bts.forEach(member => {
    console.log(`이름: ${member.name}, 출생: ${member.birth}`);
});

이와 같이 배열을 사용할 수 있지만, UI에서 반복적으로 정보를 표시하는 것까지 고려하면 스벨트가 더 효율적이고 간단하게 보이죵?ㅎㅎ

이렇게 스벨트와 자바스크립트의 상태값 관리 방법을 비교해보았어요! 각 언어마다 장점이 있지만, 스벨트는 특히 UI와의 연동에서 더 쉽게 접근할 수 있다는 것을 알 수 있었죠? 😊

다들 화이팅 하세요 :)