Svelte에서 기본 상태 관리와 전역 변수 접근하는 방법 알아보기

안녕하세요! 오늘은 Svelte의 기본 개념인 상태 관리부터 전역 반응성까지 자세히 알아보려고 해요. 각 개념을 이해하고 활용하는 데 도움이 되도록 최대한 친절하게 설명해드릴게요. 그럼 시작해볼까요? 🎉

1. 상태 관리 (State)

상태란?

Svelte에서는 애플리케이션의 데이터를 관리하기 위해 $state라는 개념을 사용해요. 간단히 말해, 상태는 UI에 표시되는 정보를 담고 있는 변수입니다. 상태가 바뀌면 UI도 자동으로 업데이트돼서 사용자가 항상 최신 정보를 볼 수 있죠! 😊

<script>
  let count = $state(0); // 초기 상태를 0으로 설정
</script>

<button on:click={() => count += 1}>Increment</button>

<p>Current count: {count}</p>

변수 설명

• count: 현재 카운트를 저장하는 상태 변수입니다. 초기값은 0으로 설정되어 있고, 사용자가 버튼을 클릭할 때마다 1씩 증가합니다.

주의점

• $state로 정의된 상태는 어떤 UI 요소와 연결되며, 그 요소가 업데이트될 때마다 상태 변화가 자동으로 화면에 반영됩니다.
• 이 상태를 직접적으로 재할당하는 것이 아니라 값만 변경하여 사용하는 것이 중요해요. 예를 들어, count = 5와 같이 명시적으로 재할당하면 안 되고, count += 1과 같이 변경해야 합니다.
• $state는 읽기와 수정이 모두 가능한 타입이에요!

2. 반응형 속성 (Reactivity)

반응형 변수란?

Svelte에서는 {} 중괄호를 사용하여 변수를 출력할 수 있어요. 반응형 변수는 변수가 바뀔 때마다 UI가 자동으로 업데이트됩니다.

<script>
  let name = "John";
  let greeting = `Hello, ${name}!`; // name이 바뀌면 greeting도 변해요.
</script>

<p>{greeting}</p> <!-- Hello, John! -->

변수 설명

• name: 사용자 이름을 담고 있는 변수입니다.
• greeting: 동적으로 생성된 문자열로, name이 바뀌면 자동으로 변해요.

주의점

• 변수를 출력하는 곳에 중괄호 {}를 사용하는 것을 잊지 마세요!
• 또한, 문자열을 조작할 때 변수를 문자열 리터럴에 직접 넣어주는 것이 좋은데, 이렇게 하면 더욱 간결하게 코드를 작성할 수 있습니다.

3. 상태의 유도 (Derived State)

유도 상태란?

상태의 변화를 기반으로 다른 값을 자동으로 계산할 수 있어요. 이를 위해 Svelte에서는 $derived를 사용해요. 이걸 이용하면 상태 변화에 따라 다른 변수도 자동으로 업데이트됩니다.

<script>
  let numbers = $state([1, 2, 3]);
  let total = $derived(numbers.reduce((index, num) => index + num, 0));
</script>

<p>Total: {total}</p> <!-- Total: 6 -->

변수 설명

• numbers: 상태 배열로, 카운팅할 숫자들이 담겨 있어요.
• total: 현재 numbers 배열의 모든 값을 합한 값입니다. numbers 배열이 바뀌면 total도 다시 계산돼요.
  • 여기서 잠깐! reduce, map, foreach문의 차이점을 모르신다면 짚고 넘어가보는건 어떨까요? ✨

주의점

• $derived 상태는 읽기 전용이에요. 즉, 직접적으로 값을 변경할 수 없습니다. numbers를 수정해야 total이 업데이트되죠.
• 또한, 유도된 상태를 사용할 때는 항상 의존하는 상태가 변경되면 자동으로 업데이트된다는 점과, 재할당이 아닌 변수의 내용을 수정하는 방식으로 작업해야 해요.

4. 이벤트 핸들링 (Event Handling)

이벤트란?

사용자가 버튼 클릭, 마우스 움직임 등과 같은 행동을 일으킬 때, 이를 이벤트라 해요. Svelte에서는 이벤트를 쉽게 처리할 수 있어요! 

<script>
  let count = $state(0);
  
  function increment() {
    count += 1; // count 값 증가
  }
</script>

<button on:click={increment}>Increment</button>
<p>Count: {count}</p>

변수 설명

• increment: count를 증가시키는 함수입니다.

주의점

• 이벤트 핸들러는 UI 요소에 필요한 반응을 정의해야 해요. 여기서는 버튼 클릭 시 increment 함수가 호출되어 count가 증가해요.
• 핸들러에 로직을 추가할 때는 불필요한 코드 중복을 피하고, 가독성을 유지할 수 있도록 주의하세요!

5. 사이드 이펙트 (Side Effects)

사이드 이펙트란?

상태 변화에 따라 추가적인 작업이 필요할 때 사용해요. 예를 들어, 서버에 데이터 요청, 타이머 설정 등이 바로 사이드 이펙트예요. 🌊

<script>
  let elapsed = $state(0);
  let interval = $state(1000);

  $effect(() => {
    const id = setInterval(() => {
      elapsed += 1; // elapsed 시간 증가
    }, interval);

    return () => {
      clearInterval(id); // 이전 타이머 제거
    };
  });
</script>

<p>Elapsed time: {elapsed} seconds</p>
<button on:click={() => interval /= 2}>Speed Up</button>
<button on:click={() => interval *= 2}>Slow Down</button>

변수 설명

• elapsed: 경과하는 시간을 저장하는 상태 변수입니다.
• interval: 시간 증가속도를 조절하는 변수입니다.

주의점

• $effect는 주의하여 사용해야 해요! 이곳에서 여러 사이드 이펙트를 정의할 경우 코드를 복잡하게 만들 수 있어요.
• 일반적으로는 이벤트 핸들러를 통해 사이드 이펙트를 처리하는 것이 더 나은 접근법이에요.
• 청소 함수(return)를 사용하여 이전 타이머를 지우는 것은 메모리 누수를 방지해 줍니다

6. 전역 반응성 (Universal Reactivity)

전역 상태란?

Svelte에서는 여러 컴포넌트 간에 상태를 공유할 수 있어요! 이를 통해 각 컴포넌트에서 동일한 값을 사용할 수 있답니다. 특히 다양한 컴포넌트에서 동일한 데이터를 이용할 때 유용해요.

// shared.svelte.js
export const counter = $state({ count: 0 });

<script>
  import { counter } from './shared.svelte.js';
</script>

<p>Counter: {counter.count}</p>
<button on:click={() => counter.count += 1}>Increment</button>

변수 설명

• counter: 전역에서 관리하는 카운터 상태로, 모든 컴포넌트에서 참조할 수 있어요.

주의점

• 전역 상태를 사용할 때는 주의가 필요해요. 각 컴포넌트가 같은 상태를 참조하게 되므로, 관리가 어려워질 수 있어요.
• $state 상태는 직접 재할당하지 말고, 내용을 수정하는 방식으로 상태를 업데이트해야 합니다. 예를 들어, counter.count++와 같이 조건에 따라 상태를 변경할 수 있어요

이로써 Svelte의 상태 관리와 반응성에 대해 모두 정리했습니다! 🎉 이 튜토리얼이 Svelte를 이해하는 데 큰 도움이 되었길 바라요. 앞으로도 궁금한 점이 생기면 언제든지 질문해 주세요! Happy coding! 💻✨

 

출처 : https://svelte.dev/tutorial/svelte/