[ Svelte5 ] - 1. 기본 Svelte 컴포넌트 구성 요소, HTML 템플릿 문법

Topic =  Svelte의 HTML 요소에 script 변수들을 바인딩하는 방법 정리해보기.

 

---

 

1. Svelte 컴포넌트 구성요소

기본적인 Svelte의 구성요소는 다음과 같다

 

• script 태그
  • 컴포넌트의 JS 로직과 상태를 정의하는 영역.
  • <script lang="ts"></script> 를 통해 ts 적용 가능.
• HTML 템플릿 영역 - main 태그 ( 생략 가능 )
  • HTML 요소가 위치하는 영역으로 scipt 태그, style 태그 영역 외 영역이 HTML 템플릿 영역으로, <main></main> 태그를 통해 명시적으로 HTML 템플릿 영역을 지정할 수도 있다.
• style 태그
  • 컴포넌트 내, 외부의 요소 스타일을 정의하는 영역
  • 기본적인 style 태그 내 스타일 속성은 해당 컴포넌트 내부에만 적용된다.
  • 전역 스타일 적용도 가능하다 ➡️ :global() 함수로 전역 스타일 속성 지정.

• 작성일 기준으로 codeSandbox는 Svelte 3까지밖에 지원하지 않으므로 이후 코드들은 블로그 코드 스니팻으로 작성예정.

 

JS ↔ HTML 요소 바인딩

 

JS 변수, 객체 등을 HTML 바인딩 하는 것

변수 삽입 (Interpolation)

• 중괄호 { }를 사용해 변수를 HTML 템플릿 요소 내부에 삽입할 수 있다.

<script>
    let name = "Svelte"; 
</script> 

<h1>Hello, {name}!</h1>

 

속성 바인딩 (Attribute Binding)

• Svelte 변수의 값을 HTML 속성에 바인딩할 수 있다.

 

<script> 
    let src = "image.png"; 
</script> 

<img src={src} alt="Dynamic image" />

 

리스너 바인딩 (Event Handlers)

• HTML 요소 이벤트 리스너로 등록할 수 있는데, 파라미터가 없는 경우에는, 함수명을 중괄호로 감싸주기만 해도 정상적으로 실행이 된다.
• 만약, 파라미터가 필요할 경우에는 익명 함수로 리스너와 파라미터를 정의 해주어야 한다.

<script>
function handleClick() {
    alert("Button clicked!");
    }
function handleClickParams(p1) {
    console.log("param1 :", p1)
    }
let testValue = 1
</script>

<button onclick={handleClick}>Click Me</button>
<button onclick={ () => { handleClickParams(testValue) }}>Param Click Me</button>

 

양방향 바인딩 (Two-Way Binding)

• 기본적으로 변수를 중괄호로 감싸 HTML 템플릿에 변수를 바인딩 하는 것이 단방향 바인딩이다. 즉, HTML 템플릿에서의 변수 값이 변경되어도 script 태그 내부의 실제 변수는 값이 변하지 않는 것이다.
• bind:를 사용하여 변수와 HTML 요소 값을 양방향 바인딩 하게 되면 HTML 요소 값이 변경될 때, 바인딩 된 실제 변수에도 변경이 적용된다.

 

<script> 
    let inputText = ""; 
</script> 

<input bind:value={inputText} /> 
<p>You typed: {inputText}</p>

 

 

 

 

 

조건문 ( 조건부 랜더링 )

<script>
    let isCreatable = false
    let isUpdatable = false
    let isReadable = true
</script>

{#if isCreatable && isUpdatable && isReadable}
	<div>creatable, updatable, deletable</div>
{:else if isReadable }
	<div>not creatable, not updatable, readable</div>
{:else}
	<div>NOT ACCESS</div>
{/if}

• if 조건문이 시작되는 HTML 템플릿은 {#if CONDITION } {/if} 와 같이 작성할 수 있으며, {:else} or {:else if}와 같이 else 구문도 사용할 수 있다.
• 각각의 if, else if, else 구문 사이의 요소가 각 단계에서 실행되는 로직이다.

 

 

반복문 ( 반복 랜더링 )

<script>
    let users = [
        { id: 0, name: "lee", age: 20 },
        { id: 1, name: "park", age: 22 },
        { id: 2, name: "kim", age: 23 }
    ]
</script>

{#each users as user (user.id)}
    <div>{user.name}의 나이는 {user.age}</div>
{/each}

// INDEX 를 사용하는 로직
{#each users as user, index (user.name, user.age)}
    <div>{index+1}번째 user, {user.name}의 나이는 {user.age}</div>
{/each}

• {#each 배열 as 배열요소 ( 키 블록 ) 
• {#each 배열 as 배열요소, 인덱스 ( 키 블록 ) 

🌟키 블록은 배열 내부에서 각 항목을 고유하게 식별하는 데 사용된다. 중복되지 않는 key 로 지정해주어야 하며, 여러 속성을 키로 지정할 수 있다. 해당 키는 배열의 항목이 추가 / 삭제 되는 등 배열이 변경될 때, 어떤 항목이 사라지고 어떤 새로운 항목이 추가되는지를 구분할 수 있어 성능 최적화 효과가 있다.

• 키 블록을 지정하지 않으면, 기본적으로 인덱스를 기반으로 배열을 식별하게 되는데 배열 중간의 요소가 삭제되어도 화면에는 마지막 요소가 사라지는 현상 등의 문제가 발생할 수 있다.

 

HTML 주입 - @html

<script>
    let myText = "<strong>Bold Text</strong>";
</script>

<div>{@html myText}</div>

• 사용자 입력이 포함된 HTML을 주입 받을 경우 보안문제가 발생한다.
• 비즈니스 로직에 사용❌
• 외부 라이브러리 사용 등 API 응답으로부터 동적으로 생성된 HTML을 랜더링 해야할 때 사용될 수 있다.

 

 

 

 

 

 

---

[Reference]