Svelte는 웹 개발 영역에서 많이 사용되는 자바스크립트 프레임워크로, 개발자가 일반 자바스크립트로 작업하는 것과 유사한 경험으로 시각적으로 매력적인 웹 애플리케이션을 제작할 수 있는 간단하고 사용자 친화적인 구문으로 잘 알려져 있습니다.
Svelte 액션은 개발자가 동적 웹 애플리케이션을 쉽게 만들 수 있도록 지원하는 Svelte 프레임워크의 기본 요소입니다. 이 포괄적인 가이드는 이러한 액션이 어떻게 작동하는지에 대한 심층적인 이해를 제공하고 효과적인 구현에 대한 실용적인 팁을 제공합니다. Svelte의 모든 기능을 활용하려면 액션 시스템을 마스터하는 것이 필수적입니다.
스벨트 액션이란 무엇인가요?
본질적으로 Svelte의 기본 구성 요소는 요소가 DOM(문서 객체 모델) 내에 통합될 때 실행되는 JavaScript 함수의 구현과 관련이 있습니다. 이러한 동작의 기능에는 반환된 자바스크립트 객체 내에 캡슐화된 파괴 메서드 제공이 포함될 수 있으며, 해당 요소가 DOM에서 제거될 때 브라우저에서 실행을 유도합니다. 예를 들어, DOM 요소에 액세스할 수 있게 될 때마다 해당 요소의 가장 내부 콘텐츠를 캡처하고 기록하고자 하는 시나리오를 생각해 보면, 실행 가능한 솔루션은 다음 단계를 실행하는 것입니다:
<script>
let messageShown;
let message;
$: messageShown ? console.log("Mounted:", message?.innerText) : "";
</script>
{#if messageShown}
<div bind:this={message}>This is a message...</div>
{/if}
<button on:click={() => (messageShown = !messageShown)}>Toggle Message</button>
앞서 언급한 코드에는 스크립팅 태그 내에 정의된 두 개의 매개변수, 즉 ‘messageShown’과 ‘message’가 포함되어 있습니다. ‘messageShown’의 값이 참으로 간주되는 경우에만 브라우저가 div 요소에 자신을 첨부합니다. 또한 버튼 컴포넌트는 ‘messageShown’ 매개변수의 상태를 관리할 책임이 있습니다.
div 요소에는 호스트 요소, 즉 div와 messageShown 변수 간의 연결을 설정하는 ‘bind’라는 지시문이 있습니다. 후속 문은 달러 기호를 사용하여 반응형으로 지정되며, 이는 관련 종속성이 변경될 때 문 내의 모든 함수가 새로 실행됨을 나타냅니다.
이 시나리오에서 달러 기호($)는 웹 브라우저가 후속 절의 모든 수정 사항을 모니터링하고 메시지 바인딩의 내용을 기록하도록 지시합니다. 메시지 바인딩은 div 요소와 연관되어 있다는 점을 기억해야 합니다.
실제로 비교적 간단한 문제로 간주될 수 있는 문제를 해결하기 위해 상당히 많은 양의 코드가 활용된 것으로 보입니다. Svelte 프레임워크를 구현하면 이러한 작업을 간결하고 효율적으로 처리할 수 있으므로 요소의 마운트 상태 모니터링과 같은 프로세스를 크게 간소화할 수 있습니다.
스벨트 액션 생성 방법
스벨트 프레임워크를 활용하면 액션을 사용하여 원하는 기능을 구현할 수 있으며, 이는 특정 컴포넌트 내의 특정 요소에 `use:` 지시어를 첨부하여 달성할 수 있습니다. 이 지시어는 DOM 내에서 지정된 요소가 처음 렌더링될 때 의도한 작업을 실행하기 위한 통로 역할을 합니다.
<script>
let messageShown = false;
const notify = (node) => {
console.log("Mounted", node.innerText);
}
</script>
{#if messageShown}
<div use:notify>
This is a message...
</div>
{/if}
<button on:click={()=>messageShown=!messageShown}>Toggle Message</button>
이 코드 블록에는 HTML 문서의 웹 페이지 컨텍스트 내에서 실행되며 브라우저의 개발자 콘솔에 메시지를 기록하기 위한 “notify”라는 JavaScript 함수의 인스턴스가 포함되어 있습니다. 해당 마크업은 ‘notify’ 함수의 참조 지점 역할을 하는 ‘use’ 속성을 활용합니다.
앞서 언급한 코드 스니펫은 DOM이 `div` 요소의 인스턴스를 발견할 때마다 웹 브라우저에 `notify` 함수를 실행하도록 지시합니다. notify` 함수 내의 `node` 인수는 연산이 바인딩되는 특정 컴포넌트를 나타내며, 대상 요소를 효과적으로 지정합니다.
이전 방법은 효과적이지만, 동일한 로직을 반복하지 않고 여러 컴포넌트에 일관되게 적용하기 어렵다는 점을 고려해야 합니다. 이러한 반복은 지루하고 오류가 발생하기 쉽습니다.
스텔스 액션은 본질적으로 함수이므로 애플리케이션 전체에서 활용할 수 있는 모듈형 컴포넌트를 쉽게 만들 수 있습니다. 이러한 액션을 `lib` 디렉토리 내의 별도의 `.js` 파일에서 내보내면 개별 요소에 각각 다른 용도로 사용되는 여러 액션을 첨부할 수 있습니다. 일반적으로 `lib` 디렉터리 내의 `actions.js` 파일은 미리 정의된 다양한 액션에 대한 액세스를 제공합니다.
export function action1(node) {
// Some code to run...
}
export function action2(node) {
// Some code to run...
}
원하는 위치에 필요한 기능을 통합하여 목표를 효과적으로 달성할 수 있습니다.
<script>
import { action1 } from "./lib/actions"
</script>
<div use:action1>
</div>
액션에서 destroy 메서드 사용
Svelte를 사용하는 동안 DOM에서 요소가 제거되는 것을 감지하려면 프레임워크 내의 각 액션에 “destroy”라는 파괴 메서드가 있다는 것을 이해하는 것이 중요합니다. 이를 통해 호스팅 요소가 브라우저에 의해 DOM에서 제거되는 정확한 순간에 특정 작업을 실행할 수 있습니다.
제공된 코드 스니펫은 초기 예제에서 ‘notify’ 함수를 조정하여 ‘destroy’ 메서드가 포함된 객체를 반환하는 사용자 정의 구현을 생성하는 방법을 보여줍니다. 이는 기본 `EventEmitter` 클래스를 확장하고 프로토타입 내에서 원하는 기능을 구현하여 달성할 수 있습니다.
const notify = (node) => {
console.log("Mounted", node.innerText);
return {
destroy: ()=>console.log('Unmounted!')
}
}
브라우저에서 요소를 제거하면 파괴자(destroy) 메서드가 호출되고 콘솔 로그에 “Unmounted!” 메시지가 표시됩니다.
액션에 파라미터 전달
Svelte에서 “use” 지시어를 사용하면 “:”를 통합하여 요소가 자동으로 파라미터에 바인딩됩니다. 이를 통해 일반적으로 “노드”라고 하는 매개변수를 통해 해당 요소를 참조할 수 있습니다. 또한 중괄호 “{ }” 안에 매개변수를 구현하여 추가 매개변수로 액션을 강화할 수 있습니다(예: { userId: 12345 }.
<div use:action={param}></div>
액션 내에서 매개변수 “param”을 활용하려면 액션을 다음과 같이 구조화해야 합니다:
function action(node, param){
// Some code here...
}
함수나 메서드에 여러 변수를 전달할 때는 일반적으로 ‘객체’라고 하는 단일 데이터 구조로 함께 전달해야 한다는 점에 유의해야 합니다. 이렇게 하면 코드 내에서 정보를 보다 체계적이고 효율적으로 처리할 수 있습니다.
<div use:action={{param1, param2}}>
</div>
앞서 언급한 기법을 사용하면 제공된 예제에서 알 수 있듯이 지정된 작업 과정 내에 앞서 언급한 요소를 통합할 수 있습니다.
function action(node, {param1, param2}) {
// Some code here...
}
액션에서 업데이트 메서드 사용
또한 ‘삭제’ 메서드가 제공하는 기능 외에도 액션은 관련 입력 변수가 변경될 때 자동으로 작동하는 ‘업데이트’ 메서드라고 하는 보완 메커니즘을 구현할 수도 있습니다. 예를 들어, 컴퓨팅 엔티티가 완벽한 정사각형인 숫자 값을 무작위로 선택하고, 인간 참가자는 이 비밀 수치를 알아내려고 시도하는 초보적인 게임을 보여주는 다음의 코드 스니펫을 생각해 보겠습니다.
<script>
let number = null;
let randomSign = Math.random() < 0.5 ? -1 : 1;
let guess = Math.floor(Math.random()*10) * 5 * randomSign;
console.log(guess);
let message = `Guess the number the computer is thinking...
It is a multiple of 5 :-)`
function evaluate(node, {number, guess}){
return {
update:({number, guess}) =>{
number > guess ? message='Lower!' : message = "Higher!"
number === guess ? message="You guessed it!" : "";
}
}
}
</script>
{message}
<h1 use:evaluate={{number, guess}}>
{number}
</h1>
<button on:click={()=>number=number+5}>Increase by 5</button>
<button on:click={()=>number=number-5}>Reduce by 5</button>
제공된 코드에는 ‘업데이트’ 메서드를 통합하는 엔티티를 산출하는 연산을 구성하는 ‘평가’ 함수가 있습니다. 이 메서드는 입력 변수의 변동을 모니터링하고 정확한 결정에 대한 개인의 근접성에 따라 응답을 생성합니다. 또한 `온:클릭` 표시로 장식된 두 개의 버튼이 있으며, 이 버튼과 관련된 숫자 값을 늘리거나 줄이는 용도로 사용됩니다.
웹 개발을 더 쉽게 만드는 스벨트
스벨트는 웹 기반 애플리케이션을 구성하는 혁신적인 방법론을 채택하여 번거로운 작업을 런타임에서 컴파일 전 단계로 이전함으로써 전체 코드 구조를 최적화하여 프로그램을 더 빠르고, 슬림하게, 자원 효율적으로 관리할 수 있도록 합니다.
세련되고 사용자 친화적인 구문을 통해 개발자가 손쉽게 매력적인 웹 인터랙션을 제작할 수 있는 Svelte. 프레임워크의 응답성 메커니즘은 상태 처리를 간소화하여 생산성을 더욱 향상시킵니다. 메타하이브리드 프레임워크인 스벨트키트는 스벨트를 경로 탐색, 서버 렌더링 기능 및 추가 기능을 제공하는 종합 솔루션으로 전환합니다.