[Luvit 한달 스터디] 새로운 웹 개발의 시작 스벨트 #2

Luvit 한달 스터디

 

 

이번주는 3부(9장 폼 관련 요소 바인딩 ~ 14장 스토어)를 공부했다.

 

✏️폼 관련 요소 바인딩

바인딩

상태값과 그 값을 제어하는 요소를 결합하는 것

바인딩은 bind: 를 사용하여 HTML 요소의 값과 Javascript 변수를 자동으로 동기화하는 것이다. 바인딩은 크게 단방향 바인딩과 양방향 바인딩이 있다.

 

• 단방향 바인딩:요소가 상태값을 직접 변화시키지 못한다(props).
• 양방향 바인딩: 입력과 출력이 동시에 변경되도록 처리한다. 즉, 입력 상자에 값을 입력하면 그와 연결된 값들도 자동으로 업데이트된다.

스벨트에서는 폼 데이터 제어 시 양방향 바인딩을 사용한다.사용자가 입력 필드에 값을 입력하면 연결된 변수가 즉시 업데이트되고, 반대로 변수가 변경되면 UI가 자동으로 갱신된다. 이는 다른 프레임워크에서 수동으로 이벤트 리스너를 설정하고 상태를 관리해야 했던 번거로움을 크게 줄여준다!

<태그 요소 bind:태그속성={상태값} />

 

입력 요소 관련 바인딩

다양한 입력 요소(텍스트, 체크박스, 라디오 버튼 등)에 바인딩 속성을 사용할 수 있다.

Svelte는 HTML 입력 요소의 특성에 따라 서로 다른 바인딩 속성을 제공한다. 텍스트 입력에는 bind:value, 체크박스에는 bind:checked, 라디오 버튼에는 bind:group을 사용한다. 이런 타입별 바인딩은 각 요소의 네이티브 동작을 그대로 활용하면서도, 상태 관리를 단순화한다.

<script>
  let text = '';
  let isChecked = false;
  let selectedOption = '';
  let textarea = '';
</script>

<input type="text" bind:value={text} />
<input type="checkbox" bind:checked={isChecked} />
<input type="radio" bind:group={selectedOption} value="option1" />
<input type="radio" bind:group={selectedOption} value="option2" />
<textarea bind:value={textarea}></textarea>

<div>
  <p>텍스트: {text}</p>
  <p>체크됨: {isChecked}</p>
  <p>선택된 옵션: {selectedOption}</p>
  <p>텍스트 영역: {textarea}</p>
</div>

 

선택 상자 관련 바인딩

select 요소에서 단일 선택과 다중 선택 모두 bind:value로 처리할 수 있다.

Select 요소의 바인딩은 단일 선택과 다중 선택 모드에 따라 다르게 동작한다. 단일 선택 모드에서는 선택된 값이 문자열로 바인딩되고, 다중 선택 모드(multiple 속성)에서는 선택된 값들이 배열로 바인딩된다. 

<script>
  let selected = '';
  let multiSelected = [];
  let options = ['사과', '바나나', '오렌지', '포도'];
</script>

<!-- 단일 선택 -->
<select bind:value={selected}>
  <option value="">선택하세요</option>
  {#each options as option}
    <option value={option}>{option}</option>
  {/each}
</select>

<!-- 다중 선택 -->
<select multiple bind:value={multiSelected}>
  {#each options as option}
    <option value={option}>{option}</option>
  {/each}
</select>

<p>선택된 항목: {selected}</p>
<p>다중 선택된 항목: {multiSelected.join(', ')}</p>

다중 선택 시에는 ctrl + 클릭

---

🪢기타 요소 바인딩

each 블록 바인딩

반복 블록 내에서 각 항목의 속성을 개별적으로 바인딩하여 목록 데이터를 효과적으로 관리할 수 있다

each 블록 내에서 바인딩을 하면 목록의 각 항목을 독립적으로 제어할 수 있다. 각 항목의 상태 변화가 다른 항목에 영향을 주지 않으면서도 전체 목록의 상태를 실시간으로 추적할 수 있다.

<script>
  let items = [
    { id: 1, name: '항목1', completed: false },
    { id: 2, name: '항목2', completed: true },
    { id: 3, name: '항목3', completed: false }
  ];
</script>

{#each items as item}
  <div>
    <input type="checkbox" bind:checked={item.completed} />
    <input type="text" bind:value={item.name} />
    <span>{item.completed ? '완료' : '미완료'}</span>
  </div>
{/each}

<p>완료된 항목: {items.filter(item => item.completed).length}</p>

 

멀티미디어 요소 바인딩

비디오와 오디오 요소의 재생 상태, 볼륨, 진행 시간 등을 바인딩하여 커스텀 미디어 플레이어를 구현할 수 있다.

 

읽기 전용 속성

속성	설명
iduration	총 재생 길이(초)
buffered	{start, end} 객체들의 배열로, 버퍼 된 위치 표시
seekable	{start, end} 객체들의 배열로, 위치를 찾을 수 있는 범위 표시
played	{start, end} 객체들의 배열로, 재생했던 위치들을 표시
seeking	찾는 중인지를 true/false로 표시
ended	재생이 끝났는지를 true/false로 표시
videoWidth	video 태그의 너비를 나타냄(only video)
videoHeight	video 태그의 높이를 나타냄(only video)

 

읽고 쓰기 속성

속성	설명
currentTime	현재 재생 위치(초)
playbackRate	재생 속도
paused	일시 정지됐는지 true/false로 표시
volume	음량 크기(0~1)

 

공간 바인딩

요소의 크기와 위치 정보를 바인딩하여 반응형 레이아웃, 동적 UI를 구현할 수 있다.

블록 레벨의 요소(div, h1 등)들은 clientWidth, clientHeight, offsetWidth, offsetHeight를 읽기 전용 속성으로 바인딩 할 수 있다. 공간 바인딩을 통해 요소의 크기 변화에 따른 반응형 동작을 구현하거나, 요소의 위치를 기반한 상호작용을 만들 수 있고, 특히 차트, 그래프, 동적 레이아웃 등에서 유용하게 사용된다.

<script>
	let w;
	let h;
	let size = 20;
</script>

<p>글자 크기를 변경해보세요</p>
<input type = "range" bind:value={size} min="10" max="100"/>
<p>글자 크기: {size}px</p>
<div bind:clientWidth={w} bind:clientHeight={h}>
	<span style = "font-size: {size}px">글자</span>
</div>

 

bind:this 바인딩

DOM 요소에 직접 접근하여 네이티브 메서드를 호출하거나 속성을 조작할 수 있다.

리액트의 ref 같은 기능. 포커스 설정, 스크롤 위치 조정, 캔버스 조작 등 직접적인 DOM 조작이 필요한 상황에서 쓸 수 있다. bind:this를 사용하면 명령이 발생하는 인스턴스에서만 작동하게 해 전역에서 처리되는 문제가 발생하지 않는다. 컴포넌트 생명주기를 고려해서 사용해야 함

<script>
  let inputElement;
  let canvasElement;
  let ctx;

  function focusInput() {
    inputElement.focus();
  }

  function drawOnCanvas() {
    if (canvasElement) {
      ctx = canvasElement.getContext('2d');
      ctx.fillStyle = 'red';
      ctx.fillRect(10, 10, 100, 100);
    }
  }
</script>

<input bind:this={inputElement} placeholder="클릭하여 포커스" />
<button on:click={focusInput}>입력 필드 포커스</button>

<canvas bind:this={canvasElement} width="200" height="200"></canvas>
<button on:click={drawOnCanvas}>캔버스에 그리기</button>

 

컴포넌트 바인딩

자식 컴포넌트의 변수나 함수를 부모 컴포넌트에서 바인딩하여 컴포넌트 간 통신을 구현할 수 있다.

이전에 공부한 props는 자식 컴포넌트가 부모 컴포넌트에 영향을 줄 수 없었지만, 컴포넌트 바인딩 시 부모와 자식 컴포넌트 간 양방향 통신이 가능해진다. 자식 컴포넌트에서 export로 선언된 변수나 함수를 부모 컴포넌트에서 바인딩할 수 있고, 이를 통해 컴포넌트 간 상태 동기화와 메서드 호출이 가능하다.

<!-- Child.svelte -->
<script>
  export let value = '';
  export let count = 0;
  
  export function reset() {
    value = '';
    count = 0;
  }
</script>

<input bind:value />
<button on:click={() => count++}>Count: {count}</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  
  let childValue = '';
  let childCount = 0;
  let childComponent;
</script>

<Child bind:value={childValue} bind:count={childCount} bind:this={childComponent} />

<p>자식 컴포넌트 값: {childValue}</p>
<p>자식 컴포넌트 카운트: {childCount}</p>
<button on:click={() => childComponent.reset()}>리셋</button>

---

🎰스벨트 slot

slot은 컴포넌트 내용(마크업)을 동적으로 주입할 수 있는 플레이스홀더 역할을 한다.

slot 기본 사용법

slot은 React의 children props와 유사한 기능으로, 컴포넌트를 재사용 가능한 템플릿으로 만들어준다. 부모 컴포넌트에서 자식 컴포넌트 태그 사이에 작성한 내용이 slot 위치에 렌더링 된다. slot을 사용하여 레이아웃과 wrapper 컴폰너트를 효율적으로 구현할 수 있다.

<!-- Card.svelte -->
<div class="card">
  <header>
    <h2>카드 제목</h2>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <p>카드 하단</p>
  </footer>
</div>

<!-- App.svelte -->
<script>
  import Card from './Card.svelte';
</script>

<Card>
  <p>이 내용이 slot에 들어갑니다.</p>
  <button>액션 버튼</button>
</Card>

• <slot></slot>으로 내용 삽입 위치를 지정한다.
• 부모 컴포넌트에서 자식 태그 사이 내용이 slot에 렌더링된다.

 

fallback slot

slot에 기본값을 제공하여 내용이 전달되지 않을 때 표시될 대체 컨텐츠를 지정할 수 있다.

<!-- Modal.svelte -->
<div class="modal">
  <div class="modal-content">
    <slot name="header">
      <h2>기본 제목</h2>
    </slot>
    
    <slot>
      <p>내용이 없습니다.</p>
    </slot>
    
    <slot name="footer">
      <button>확인</button>
    </slot>
  </div>
</div>

<!-- App.svelte -->
<script>
  import Modal from './Modal.svelte';
</script>

<Modal>
  <p>내용이 있습니다.</p>
</Modal>

 

slot 이름 설정

여러개의 slot을 구분하기 위해 name 속성을 사용해 명명된 slot을 만들 수 있다.

명명된 slot은 하나의 컴포넌트에서 여러 개의 콘텐츠 영역을 정의할 때 사용된다. 각 slot에 고유한 이름을 부여하고, 부모 컴포넌트에서 slot 속성을 사용해 특정 slot에 내용을 전달할 수 있다.

<!-- App.svelte -->
<script>
  import Layout from './Layout.svelte';
</script>

<Layout>
  <h1 slot="header">사이트 제목</h1>
  <nav slot="sidebar">
    <a href="/">홈</a>
    <a href="/tutorial">소개</a>
  </nav>
  <div>메인 콘텐츠</div>
  <p slot="footer">svelte</p>
</Layout>

<!-- Layout.svelte -->
<div class="layout">
  <header>
    <slot name="header"></slot>
  </header>
  
  <nav>
    <slot name="sidebar"></slot>
  </nav>
  
  <main>
    <slot></slot>
  </main>
  
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

 

slot props

slot에 데이터를 전달하여 부모 컴포넌트에서 자식 컴포넌트의 데이터를 활용할 수 있다.

slot props는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방식이다. 자식 컴포넌트에서 slot에 props를 전달하면, 부모컴포넌트에서 let:을 사용하여 해당 데이터에 접근할 수 있다. 

<!-- ItemList.svelte -->
<script>
  export let items = [];
</script>

<div class="item-list">
  {#each items as item, index}
    <div class="item">
      <slot {item} {index} isFirst={index === 0} isLast={index === items.length - 1}>
        <p>{item.name}</p>
      </slot>
    </div>
  {/each}
</div>

<!-- App.svelte -->
<script>
  import ItemList from './ItemList.svelte';
  
  let items = [
    { name: '항목 1', price: 1000 },
    { name: '항목 2', price: 2000 },
    { name: '항목 3', price: 3000 }
  ];
</script>

<ItemList {items} let:item let:index let:isFirst let:isLast>
  <div class="custom-item" class:first={isFirst} class:last={isLast}>
    <h3>{item.name}</h3>
    <p>가격: {item.price}원</p>
    <p>순서: {index + 1}</p>
  </div>
</ItemList>

 

조건 관련 slot

 조건부  slot은 특정 상황에서만 표시되는 slot을 구현하거나, slot에 내용이 제공되었는지 확인하여 레이아웃을 조정할 때 사용된다. $$slots 객체를 통해 slot의 존재 여부를 확인할 수 있다.

---

🌀라이프 사이클

onMount 함수 

컴포넌트가 DOM에 마운트 된 후 실행되는 함수. 초기화 작업을 수행할 때 사용한다.

onMount는 컴포넌트가 처음 DOM에 렌더링된 후 한 번만 실행되는 라이프사이클 훅이다. API 호출, 이벤트 리스너 등록, 타이머 설정 등 컴포넌트 초기화에 필요한 작업을 수행할 때 사용된다.

 

onDestroy 함수

컴포넌트가 DOM에서 제거되기 전 실행되는 함수로, 정리 작업을 수행할 때 사용한다.

onDestroy는 컴포넌트가 DOM에서 제거되기 직전에 실행되는 라이프사이클 훅이다. 이벤트 리스너 제거, 타이머 정리, 구독 해제 등 메모리 누수를 방지하고 리소스를 정리하는 작업에 사용된다.

 

beforeUpdate/afterUpdate 함수

컴포넌트가 업데이트 되기 전, 후에 실해오디는 함수들로 업데이트 사이클을 제어할 때 사용한다.

beforeUpdate는 컴포넌트의 상태가 변경되어 DOM이 업데이트되기 직전에 실행되고, afterUpdate는 DOM 업데이트가 완료된 후에 실행된다. 

 

tick 함수

다음 마이크로태스크에서 DOM이 업데이트 되도록 보장하는 함수. 상태 변경 후 즉시 DOM에 접근할 때 사용한다.

tick 함수는 상태 변경 후 DOM 업데이트가 완료될 때까지 기다리는 Promise를 반환한다. 다른 라이프 사이클 함수와 달리, 언제든지 사용할 수 있다.

---

🛩️Context API 

Context API 

컴포넌트 트리에서 props를 일일이 전달하지 않고 데이터를 공유할 수 있는 기능

Context API는 부모 컴포넌트에서 설정한 값을 자손 컴포넌트에서 직접 접근할 수 있게 하는 기능이다. 이를 통해 props drilling 문제를 해결하고, 테마, 사용자 정보, 설정 등 전역적으로 필요한 데이터를 효율적으로 관리할 수 있다.

 

상위 컴포넌트에서 setComponent를 사용하여 데이터를 설정하고, 하위 컴포넌트에서는 getContext를 사용하여 해당 데이터를 가져오는 것이 context API 사용의 기본 패턴이다.

 

dispatch

자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 기능

createEventDispatcher을 사용해 커스텀 이벤트를 생성하고, 부모 컴포넌트에게 전달할 수 있다. 

import {createEventDispatcher} from 'svelte';
const dispatch = createEventDispatcher();

const 이벤트함수 = () => {
	dispatch('디스패치명', {
    	value: 전달할 값,
        message: '전달할 메시지'
    });
}

//마크업
<컴포넌트명 on:디스패치명 />

---

🏪스토어

전역에서 데이터를 전달받고 싶거나, 데이터 변경을 요청할 때 사용

writable 스토어

읽기, 쓰기 모두 가능한 반응형 상태 저장소

writable 스토어는 svelte의 가장 기본적인 스토어 타입으로, 값을 저장하고 변경할 수 있고, 값이 변경될 때 구독자들에게 자동으로 알림을 보낸다.

import {writable} from 'svelte/store';
export const 스토어명 = writable(기본값);

//마크업
{$스토어명}

 

readable 스토어

읽기 전용 스토어로, 외부에서 값을 변경할 수 없고 내부 로직에 의해서만 값이 업데이트된다.

readable 스토어는 시간, 마우스 위치, 서버 상태 등 외부 시스템으로부터 오는 데이터를 다룰 때 사용한다. 구독자가 있을 때만 활성화되는 구조를 가지고 있다.

readable(초기값, function start (set) {
	//초기 스토어값 호출 시 코드
    return function stop() {
    	//스토어값 제거 시 코드
    };
});

 

derived 스토어

하나 이상의 스토어로부터 계산된 값을 제공하는 스토어

derived 스토어는 기존 스토어의 값을 기반으로 새로운 값을 계산하는 스토어이다. 원본 스토어가 변경될 때 자동으로 재계산된다.

import {다른 스토어, derived} from 'svelte/store';

export const derived명 = derived(기존 스토어명, $기존 스토어명 => $기존 스토어명(변경 코드 반환));

 

커스텀 스토어

writeable 스토어를 확장하여 특별한 메서드를 가진 사용자 정의 스토어를 만들 수 있다.

커스텀 스토어는 기본 스토어의 set, update, subscribe 메서드 외에 도메인 특화된 메서드를 추가한 스토어이다. 커스텀 스토어를 통해 더 직관적이고 재사용 가능한 상태 관리 로직을 구현할 수 있다.

//store.js
import {writable} from 'svelte/store';

const createCount = () => {
	const {subscribe, set, update} = writable(0);
    
    return {
    	subscribe,
        increment: () => update(n => n + 1),
        decrement: () => update(n => n - 1),
        reset: () => set(0)
    };
 }
 
 export const count = createCount();
 
 <!--Custom.svelte-->
 <script>
 	import {count} from './store.js';
 </script>
 
 <h1>현재 값: {$count} </h1>
 <button on:click={count.increment}>+</button>
 <button on:click={count.decrement}>-</button>
 <button on:click={count.reset}>리셋</button>
 
 <!--App.svelte-->
  <script>
 	import Custom from './Custom.svelte';
 </script>
 
 <Custom />

 

스토어 바인딩

입력 요소와 스토어를 직접 바인딩하여 양방향 데이터 흐름을 구현할 수 있다.

스토어 바인딩은 입력 요소와 스토어를 직접 연결하여 사용자 입력이 스토어에 즉시 반영되도록 하는 기능이다. 전역 상태와 UI 요소 간 동기화를 쉽게 구현할 수 잇다. writable 스토어를 써야 하고, set 함수가 필요하다.

<!--store.js-->
import {writable, derived} from 'svelte/store';

export const name = writable('이름');
export const greeting = derived(
	name,
    $name => `안녕~ ${$name}~`
);

<!--Binding.svelte-->
<script>
	import {name, greeting} from './store.js';
</script>

<h1>{$greeting}</h1>
<input bind:value={$name}>

<!--App.svelte-->
<script>
	import Binding from './Binding.svelte';
</script>

<Binding />

---

이번 주차부터는 실습 파트 들어갈 줄 알았는데...한참 남았다. 카드 나누는 것 마냥 대강 4등분 해놨더니 다음주에 이론 + 실습까지 할게 너무 많아졌다..

 

오늘은 바인딩부터 라이프 사이클, 스토어까지 좀 심화적인 개념을 공부했다. 완전히 생소한 개념은 아니어서 이해하는데 어렵진 않았는데, 아직 어떻게 활용할지 애매한 느낌이다🙄빨리 실습하면서 감을 익혀봐야지