[javascript] Svelte에서 상태 관리를 어떻게 할 수 있나요?
Svelte에서 상태를 관리하는 가장 기본적인 방법은 let
키워드를 사용하여 변수를 선언하는 것입니다. 이 변수는 컴포넌트의 상태가 됩니다. 예를 들어, 다음은 count
라는 상태 변수를 가지는 컴포넌트의 예입니다.
<script>
let count = 0;
function increment() {
count += 1;
}
function decrement() {
count -= 1;
}
</script>
<button on:click={increment}>증가</button>
<p>현재 값: {count}</p>
<button on:click={decrement}>감소</button>
이 예제에서 count
는 상태 변수로 선언되었습니다. increment
함수는 count
를 1 증가시키고, decrement
함수는 1 감소시킵니다. 버튼을 클릭할 때마다 해당 함수가 실행되며, 상태 변수인 count
의 값이 변경됩니다. 변경된 값은 화면에 바로 반영되어 현재 값이 표시됩니다.
만약 여러 개의 상태를 관리해야 한다면, let
키워드를 사용하여 해당 변수들을 선언하고 각각의 상태를 업데이트하면 됩니다.
또 다른 상태 관리 방법으로는 Svelte Store를 사용하는 것이 있습니다. Store는 컴포넌트 사이에서 데이터를 공유하는 데 사용되는 중앙 집중화된 상태 관리 도구입니다.
이외에도 Svelte에서는 다양한 상태 관리 라이브러리와 훅을 활용하여 상태를 보다 효율적으로 관리할 수 있습니다. Svelte는 상태 관리에 대한 다양한 선택지를 제공하기 때문에, 프로젝트에 가장 효율적인 방법을 선택할 수 있습니다.