상태의 효과적인 관리는 최신 웹 애플리케이션의 중요한 측면입니다. 대표적인 웹 개발 프레임워크인 React와 Vue는 각 플랫폼 내에서 상태를 관리하기 위해 서로 다른 전략을 사용합니다.
마찬가지로 Svelte는 라이브러리 내 상태 관리 문제를 해결하기 위한 다양한 방법을 제시합니다.
스테이트 관리란 무엇이며 왜 중요한가요?
웹 개발에서 “상태”의 개념은 특정 웹 페이지 또는 그 구성 요소의 현재 상태를 나타내는 정보와 관련이 있습니다. 예를 들어, 사용자가 사용 가능한 제품을 탐색하고 가상 장바구니에 추가한 후 결제를 진행할 수 있는 수많은 페이지로 구성된 이커머스 플랫폼을 생각해 보십시오.
상태 관리 솔루션을 활용하면 현재 보고 있는 페이지와 관계없이 장바구니 아이콘 내에 정확한 품목 수량을 표시하는 데 유용할 수 있습니다. 이 접근 방식을 사용하면 사용자가 항목을 추가하거나 제거할 때 카트의 콘텐츠가 실시간으로 동적으로 업데이트되어 웹사이트의 모든 페이지에서 일관성을 유지할 수 있습니다.
효과적인 상태 관리는 애플리케이션의 다양한 구성 요소 내에서 데이터의 구성과 효율성을 유지하는 데 중요한 역할을 합니다. 이는 궁극적으로 프로그램과 상호 작용하는 사용자에게 보다 원활하고 불편함이 적은 사용자 경험을 제공합니다.
스벨트의 상태 관리
본질적으로 스벨트 내에서 등호(‘=’)를 사용하여 상태 변수를 설정하고 수정할 수 있습니다. 이 개념을 설명하기 위해 제목(h1)에 특정 상태 변수가 반영되도록 하려는 시나리오를 예로 들어보면, 다음 코드를 실행할 수 있습니다:
<script>
let count = 0;
</script>
<h1>
{count}
</h1>
<button on:click={()=>count=count + 1}> Increase Count </button>
주어진 코드 블록은 `:= 0` 구문을 사용하여 초기 값 “0”으로 초기화되는 명명된 상태 변수인 `count`를 설정합니다. 그런 다음 템플릿 리터럴과 문자열 연결을 사용하여 `h1` HTML 요소의 값이 `count` 변수의 현재 상태를 반영하도록 설정됩니다. 또한 이 코드는 사용자가 클릭 가능한 버튼 요소와 상호 작용하여 `count` 변수를 증가시킬 수 있는 수단을 제공합니다.
Svelte에서 배열 상태 변수 업데이트
아래 제공된 코드 스니펫을 살펴보십시오:
<script>
let todoList = [
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
];
function removeLastItem() {
todoList.pop();
}
</script>
<ul>
{#each todoList as item}
<li>{item}</li>
{/each}
</ul>
<button on:click={() => removeLastItem()}> Remove last item</button>
앞서 언급한 코드 스니펫은 상태 변수인 `todoList`와 배열 간의 연결을 설정합니다. 또한 ‘마지막 항목 제거’ 버튼을 클릭하면 `removeLastItem()` 함수가 실행되어 앞서 언급한 배열 내의 마지막 요소가 `todoList` 상태 변수와 연관되어 제거됩니다.
최종 요소를 제거하는 버튼을 클릭해도 웹 브라우저 내에서 목록이 새로 고쳐지지 않지만 프로그래밍 코드 자체의 기술적 결함이나 버그 등 다양한 요인으로 인해 이러한 현상이 발생할 수 있음을 알려드립니다.
`Array.pop()` 메서드를 호출한 후에도 `todoList` 배열의 변경 사항을 인식하고 업데이트를 트리거하기 위해 `todoList` 변수를 다시 자신에게 할당하는 기술을 사용할 수 있습니다. 이 접근 방식을 사용하면 스벨트가 배열의 수정을 효과적으로 인식하고 업데이트된 목록에 대한 재렌더링 프로세스를 시작할 수 있습니다.
function removeLastItem() {
todoList.pop();
// Assign the updated array to itself
todoList = todoList;
}
웹 브라우저에서 코드를 실행하면 지정된 버튼을 클릭하면 상태 배열이 적절하게 업데이트될 것으로 예상됩니다.
스벨트 스토어로 상태 관리
스벨트에서는 연결되지 않은 프로그램 요소 간의 연결 설정이 스토어를 통해 단순화됩니다. 기본적으로 스토어는 ‘구독’ 메서드를 사용하여 구독할 수 있는 객체를 구성합니다. 기본적인 읽기 및 쓰기 저장소를 만들려면 아래 그림과 같이 ‘svelte/store’ 자바스크립트 라이브러리에서 `writable` 함수를 임포트해야 합니다:
import { writeable } from "svelte/store"
“자바스크립트 함수 handleClick(event) { console.log(‘버튼 클릭!’); } const button = document.querySelector(‘#my-button’); button.addEventListener(‘click’, handleClick); “` 이 코드는 ID가 “my-button”인 버튼이 클릭될 때 콘솔에 메시지를 로깅하는 `handleClick`이라는 함수를 정의합니다. 그런 다음 `document.querySelector()`를 사용하여 이 버튼을 선택하고 이벤트 리스너를 추가하여 버튼이 클릭될 때마다 `handleClick` 함수가 실행되도록 합니다.
import { writable } from "svelte/store";
export const todoList = writable([
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
"Water the flowers"
]);
제공된 코드는 빈 배열로 초기화되는 “todoList”라는 명명된 상수를 생성한 다음 이 배열을 “쓰기 가능” 함수에 입력으로 전달합니다. 결과적으로 애플리케이션의 전역 상태 관리 시스템의 상태를 참조하는 “store” 변수는 해당 기능이 필요한 모든 컴포넌트에서 액세스할 수 있게 됩니다.
<script>
import { todoList } from "./store";
</script>
JavaScript에서 객체의 특정 인스턴스에 액세스하려면 객체의 모든 인스턴스가 포함된 배열 내에서 원하는 인스턴스에 해당하는 인덱스 번호 또는 식별자를 제공하여 “구독” 메서드를 활용할 수 있습니다. 이를 통해 컬렉션의 개별 요소를 직접 검색하고 조작할 수 있습니다.
let list;
todoList.subscribe((items)=>{
list = items;
})
‘구독’ 메서드의 ‘storeValue’ 속성에 전달된 콜백 함수에서 상점의 현재 상태를 나타내는 인수가 수신됩니다. 그런 다음 이 인수는 “list”라는 가변 변수에 할당되어 후속 작업에 사용할 수 있습니다. “items” 배열 내의 각 항목을 표시하려면 웹 개발에서 일반적으로 사용되는 표준 렌더링 기술을 활용할 수 있습니다.
<ul>
{#each list as item}
<li>{item}</li>
{/each}
</ul>
웹사이트에서 제품의 소매 가격을 수정하려면 `update()` 메서드와 관련 콜백 함수를 활용할 수 있습니다. 이 함수는 상점의 현재 상태를 수신하고 이를 대체할 업데이트된 품목을 반환합니다.
todoList.update((items) => {
items.pop();
return items;
});
스벨트에서 읽기 전용 스토어 생성
때로는 액세스를 읽기 전용 모드로 변환하여 스토어에서 데이터를 수정하는 컴포넌트의 기능을 제한해야 할 수도 있습니다. 이는 Redux에서 제공하는 `readable` 함수를 사용하여 달성할 수 있습니다.
import { readable } from 'svelte/store';
export const todoList = readable([
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
"Water the flowers"
]);
“읽기 가능”으로 간주되는 값에 대해 `update()` 메서드를 호출하려고 하면 해당 객체에는 이 작업이 지원되지 않으므로 예외가 발생합니다. 이 시나리오는 다음 코드 스니펫으로 나타낼 수 있습니다:
function removeLastItem() {
todoList.update((items) => {
items.pop();
return items;
});
}
컨텍스트 API로 스토어 사용
Svelte에서 컨텍스트 API를 활용하려면 Svelte 모듈 내에서 사용할 수 있는 `setContext` 함수를 가져와야 합니다.
import {setContext} from "svelte"
상위 컴포넌트에서 하위 컴포넌트로 정보를 전송하기 위해 사용할 수 있는 몇 가지 방법이 있습니다. 한 가지 일반적인 접근 방식은 HTML에서 프로퍼티나 속성을 사용하는 것입니다. 여기에는 하위 컴포넌트를 초기화할 때 데이터를 인수로 전달하는 것이 포함됩니다. 또 다른 방법은 Redux나 MobX와 같은 상태 관리 도구에 데이터를 저장한 다음 이러한 라이브러리에서 제공하는 스토어 또는 옵저버블을 통해 하위 컴포넌트 내에서 데이터에 액세스하는 것입니다. 또한 이벤트와 이벤트 리스너를 활용하여 부모 컴포넌트에서 작업을 트리거하여 자식 컴포넌트에 새로운 데이터를 업데이트할 수도 있습니다.
// Parent Component
<script>
let age = 42;
</script>
<ChildComponent age={age} />
이 방법을 활용하면 효과적이지만, 컨텍스트 API를 사용하면 요소 간에 데이터를 전송하지 않고도 서로 상호 작용할 수 있습니다. 사용Context 훅을 사용하면 React의 기능과 유사하게 사용할 수 있습니다. 스벨트에서는 컨텍스트가 본질적으로 반응하지 않기 때문에 컨텍스트에 상태 변수를 제공해야 수신 가능한 상태로 렌더링할 수 있습니다.
웹 애플리케이션 또는 소프트웨어 프로젝트에서 다른 구성 요소의 기반이 되는 재사용 가능한 모듈식 코드를 설명하는 데 사용되는 용어입니다. 일반적으로 이벤트 처리, 데이터 관리 및 스타일링과 같이 여러 하위 컴포넌트가 공유하는 공통 기능을 처리하도록 설계됩니다. 상위 컴포넌트는 사용자 인터페이스의 “백본”으로 생각할 수 있으며, 전체 레이아웃에 구조와 조직을 제공하는 동시에 개별 하위 컴포넌트가 특정 작업에 집중할 수 있도록 합니다.
<script>
import { writable } from "svelte/store";
import Component2 from "./Component2.svelte";
import { setContext } from "svelte";
let numberInStore = writable(42);
setContext("age", numberInStore);
</script>
<ChildComponent />
<button on:click={() => $numberInStore++}>Increment Number</button>
제공된 코드 스니펫에서는 스토어를 정의하고 특정 키인 “age”와 함께 Svelte의 `setContext` 함수에 전달합니다. 컴포넌트 내에서 이 상점의 값에 액세스하려면 상점 참조를 위한 Svelte의 표준 규칙에 따라 상점 이름 앞에 달러 기호($)를 붙이기만 하면 됩니다.
자식 요소는 유효성 검사 목적으로 적절한 키를 제공해야 하는 getContext 메서드를 사용하여 부모 엔티티가 제공한 컨텍스트 데이터에 액세스할 수 있습니다.
<script>
import { getContext } from "svelte";
let userAge = getContext("age");
</script>
<h1>
{$userAge}
</h1>
Svelte와 React의 상태 관리
Svelte의 상태 관리 프로세스는 React에 비해 상당히 간소화되어 있으며, 간단한 할당 연산자(즉, 등호 ‘=’만 있으면 상태 변수를 설정 및 수정할 수 있습니다. 반대로 React와 같은 더 복잡한 웹 개발 프레임워크에서는 일반적으로 기초적인 상태 관리 책임을 처리하기 위해 `useState` 및 `useReducer`와 같은 추가 메커니즘이 필요합니다.
다양한 소프트웨어 컴포넌트 간의 복잡한 공유 정보 교환을 용이하게 하기 위해 React Context API나 Redux, Zustand 같은 서드파티 라이브러리와 같은 고급 상태 관리 솔루션의 활용이 필요한 경우가 많습니다. 하지만 강력한 자바스크립트 프레임워크인 스벨트에서는 추가 도구나 리소스 없이도 정교한 상태 관리와 관련된 요구 사항을 원활하게 처리하는 스벨트 스토어와 내장된 스벨트 컨텍스트 API의 고유한 기능 덕분에 이러한 요구 사항을 효과적으로 제거할 수 있습니다.