Svelte를 사용한 더 복잡한 바인딩

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 입력 요소 외부에서 bind 지시문을 사용하는 방법을 살펴보겠습니다.

미디어 요소

오디오 또는 비디오 요소와 함께 bind 지시문을 사용할 수 있습니다.

예를 들어 다음과 같이 오디오 또는 비디오 요소의 다양한 속성에 바인딩할 수 있습니다.

<script>
let time = 0;
let duration = 0;
let paused = true;
</script>

<video
  bind:currentTime={time}
  bind:duration
  bind:paused
  controls
  src='https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4'
>
</video>
<p>{time}</p>
<p>{duration}</p>
<p>{paused}</p>

위의 코드에서는 bind 지시문을 사용하여 DOM 비디오 요소의 currentTime , duration 및 paused 속성에 바인딩했습니다.

해당되는 경우 비디오가 재생되거나 일시중지될 때 모두 업데이트됩니다.

오디오 및 비디오 요소에 대한 바인딩 중 6개는 읽기 전용이며 다음과 같습니다.

duration  —초 단위의 비디오 길이

buffered   - {start, end} 개체의 배열

seekable   - {start, end} 개체의 배열

played   - {start, end} 개체의 배열

seeking   -  부울

ended   -  부울

양방향 바인딩은 다음에 사용할 수 있습니다.

currentTime   -  초 단위 비디오의 현재 지점

playbackRate  — 비디오 재생 속도

paused

volume   - 0과 1 사이의 값

비디오에는 videoWidth 및 videoHeight 바인딩도 있습니다.

치수

HTML 요소의 크기에 바인딩할 수 있습니다.

예를 들어 다음과 같이 텍스트의 글꼴 크기를 조정하기 위해 다음을 작성할 수 있습니다.

<script>
  let size = 42;
  let text = "hello";
</script>

<input type=range bind:value={size}>

<div >
  <span style="font-size: {size}px">{text}</span>
</div>

다음과 같이 사용할 수 있는 요소의 너비와 높이에 대한 읽기 전용 바인딩도 있습니다.

<script>
 let w;
 let h;
</script>

<style>
  div {
    width: 100px;
    height: 200px;
  }
</style>

<div bind:clientWidth={w} bind:clientHeight={h}>
  {w} x {h}
</div>

bind:clientWidth 및 bind:clientHeight는 너비와 높이를 각각 w 및 h에 바인딩합니다.

이 바인딩

this 바인딩을 사용하여 DOM 요소 개체를 변수로 설정할 수 있습니다.

예를 들어 this 바인딩을 사용하여 다음과 같이 캔버스 요소에 액세스할 수 있습니다.

<script>
  import { onMount } from "svelte";

  let canvas;

  onMount(() => {
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(20, 100);
    ctx.lineTo(100, 100);
    ctx.stroke();
  });
</script>

<canvas
  bind:this={canvas}
  width={500}
  height={500}
></canvas>

위의 코드에서는 캔버스가 로드될 때만 코드를 실행하도록 캔버스 조작 코드를 onMount 콜백에 넣었습니다.
bind:this={canvas} 캔버스 요소에 바인딩하여 onMount 콜백에서 액세스할 수 있습니다.

결국 화면에 L자 모양의 선이 그려집니다.

구성 요소 바인딩

bind 를 사용하여 구성 요소 소품에 바인딩할 수 있습니다.

예를 들어 다음 코드를 작성하여 다음과 같이 props에서 값을 가져올 수 있습니다.
App.svelte  :

<script>
  import Input from "./Input.svelte";
  let val;
</script>

<Input bind:value={val} />
<p>{val}</p>

Input.svelte  :

<script>
export let value;
</script>

<input bind:value={value} />

위의 코드에서 입력 요소에 바인딩된 value가 있습니다. 그런 다음 val를 value prop의 값으로 전달하고 bind 지시문을 사용했기 때문에 val의 App가 value의 Input로 업데이트됩니다.

따라서 입력 상자에 입력하면 값이 아래의 p 요소에도 표시됩니다.

결론

일부 속성 이름과 함께 bind를 사용할 때 미디어 요소에 바인딩할 수 있습니다.
this 바인딩을 사용하여 스크립트 태그에서 DOM 요소를 가져와서 DOM 메서드를 호출할 수 있습니다.

Component props는 bind 와 함께 사용할 수도 있습니다. 그러면 props를 통해 부모와 자식 간의 양방향 바인딩을 얻습니다.