[Svelte] Svelte 기초 - Data binding과 Reactive Values

Input & Data binding

<script>
  export let name;
  let color = 'black';

  const handleClick = () => {
    color = 'blue';
  };
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>{color} jean!</p>
  <button on:click={handleClick}>update jean color</button>
</main>

 

이렇게 color 변수를 선언한 후에 아래 <p>{color} jean!</p>을 출력하면 화면에 black jean!이라는 단어가 출력된다.

({}는 동적인 값을 넣을 때 사용한다.)

 

color 변수의 값을 버튼을 클릭했을 때 동적으로 바꿔주고 싶다면 클릭 이벤트를 등록하면 된다.

Svelte에서 inline 이벤트를 등록하는 방법은 아주 쉬운데, 먼저 script에서 함수를 선언해준 다음,

아래 태그에 on:click으로 등록하면 된다.

 

Svelte에서는 click, mousemove 등 모든 이벤트를 소문자로 등록한다.

이렇게 하면 버튼을 클릭하면 화면에 black jean!이 blue jean!으로 바뀐다.

 

 

<script>
  export let name;
  let color = 'black';

  const handleClick = () => {
    color = 'blue';
  };
  
  const handleInput = (e) => {
    color = e.target.value;
  };
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>{color} jean!</p>
  <button on:click={handleClick}>update jean color</button>
  <input type='text' on:input={handleInput} />
</main>

 

만약에 input text를 추가한 후에 내가 타이핑한 string을 color 변수로 업데이트해주고 싶다면

input 태그에 on:input을 사용하면 된다. 

 

자바스크립트에서 element.addEventListener()로 등록하는 이벤트 핸들러로 등록하는 함수에는 

Event 객체가 인자로 들어오는데, Svelte에서도 마찬가지다.

인자로 들어오는 event 객체의 target.value로 input value에 접근할 수 있다.

 

위와 같이 등록하면 input에 타이핑한 내용이 실시간으로 화면에 반영된다.

그런데 위 코드는 단방향 데이터 바인딩만 되어 있다.

 

무슨 뜻이냐하면, 사용자가 input에 yellow를 타이핑하면 color 변수의 값은 yellow가 되고 화면에도 yellow jean!이라고 뜬다.

이 때 사용자가 버튼을 클릭하면 color 변수의 값은 blue가 되고 화면에도 "blue jean!"이라고 뜨지만,

input 창에는 여전히 사용자가 입력한 yellow가 그대로 남아있다.

 

만약에 사용자가 버튼을 클릭했을 때 input에 쓰여진 yellow가 blue로 바뀌게하고 싶다면 어떻게 해야 할까?

 

 

- Two way Data binding

<script>
  export let name;
  let color = 'black';

  const handleClick = () => {
    color = 'blue';
  };
  
  const handleInput = (e) => {
    color = e.target.value;
  };
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>{color} jean!</p>
  <button on:click={handleClick}>update jean color</button>
  <input type='text' on:input={handleInput} value={color} />
</main>

 

요런 방식을 쉽게 생각할 수 있을 것이다.

input value 값을 color 값으로 지정하는 것이다.

 

 

<script>
  export let name;
  let color = 'black';

  const handleClick = () => {
    color = 'blue';
  };
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>{color} jean!</p>
  <button on:click={handleClick}>update jean color</button>
  <input type='text' bind:value={color} />
</main>

 

근데 Svelte에서는 더더욱 간단하게 처리할 수 있다.

바로 bind:value를 활용하는 것이다.

 

이렇게 하면 handleInput 메소드도 필요 없어지며,

사용자가 input에 입력하는 내용이 바로 color 변수에 반영되어 화면이 변경되고,

버튼을 클릭했을 때 input text도 바로 바뀐다! 정말 신기하다.

 

 

 

<script>
  export let name;
  let color = 'black';

  const handleClick = () => {
    color = 'blue';
  };
</script>

<main>
  <h1>Hello {name}!</h1>
  <p style='color: {color}'>{color} jean!</p>
  <button on:click={handleClick}>update jean color</button>
  <input type='text' bind:value={color} />
</main>

 

Svelte에서는 심지어 style에 바로 동적인 Data binding이 가능하다!

위와 같이 변경하면 color 값이 변경될 때마다 text 색상이 같이 변경될 것이다.

 

 

 

 

 

Reactive Values

<script>
  let firstName = 'Jimi';
  let lastName = 'Hendrix';
  let color = 'black';
</script>

<main>
  <p>{firstName} {lastName} - {color} jean!</p>
  <input type='text' bind:value={firstName} />
  <input type='text' bind:value={lastName} />
  <input type='text' bind:value={color} />
</main>

 

만약에 위와 같이 firstName과 lastName을 위와 같이 입력하고 싶다고 해보자.

firstName과 lastName을 각각 쓰는 것도 좋지만, 한꺼번에 묶어서 편리하게 사용할 수 있다.

 

 

<script>
  let firstName = 'Jimi';
  let lastName = 'Hendrix';
  let color = 'black';
  
  $: fullName = `${firstName} ${lastName}`;
</script>

<main>
  <p>{fullName} - {color} jean!</p>
  <input type='text' bind:value={firstName} />
  <input type='text' bind:value={lastName} />
  <input type='text' bind:value={color} />
</main>

 

바로 요렇게! 이렇게 사용되는 값을 Reactive Value라고 부른다.

문법은 $: 와 함께 원하는 변수명을 지어주면 된다.

 

firstName이 바인딩된 input에 이름을 타이핑하면 fullName에도 그대로 반영된다.

 

 

 

 

Reactive Statement

<script>
  let firstName = 'Jimi';
  let lastName = 'Hendrix';
  let color = 'black';

  $: fullName = `${firstName} ${lastName}`;  // reactive value
  $: console.log(color); // reactive statement
  $: {
      console.log(color);
      console.log(fullName);
  }
</script>

 

값 뿐만 아니라 statement도 특정 값에 반응하도록 만들 수 있다.

 

$: 뒤에 특정 value와 함께 statement를 적어주면 그 값이 바뀔 때마다 해당 statement가 변경된다.

만약에 여러 줄의 statement를 같이 엮어주고 싶다면 $: 뒤에 {}를 쓰고 여러 줄을 적어주면 된다.

 

 

$: {
  console.log(color);
  console.log(fullName);
}

 

위 statement만 남겨두고 실행해보면 이렇게 작동된다.