사용자 복원 사전 처리 작성

Svelte에서 이전에 React를 사용하여 만든 사용자 목록을 표시하는 응용 프로그램 을 생성합니다.

먼저 가져오기 모양 만들기

InputForm.svelte

<script>
  let firstName = ''
  let lastName = ''

  function addUser() {
    console.log(`${firstName} ${lastName} を追加します`)
  }
</script>

<div className="input-field">
  <label htmlFor="first_name">First Name</label>
  <input id="first_name" type="text" bind:value={firstName} />
</div>
<div className="input-field">
  <label htmlFor="last_name">Last Name</label>
  <input id="last_name" type="text" bind:value={lastName} />
</div>
<button class="btn waves-effect waves-light" on:click={addUser}>Add</button>

React와 비교하면 상당히 간단하게 썼다.
script 탭에서 변수를 설명하고 사용하고 싶은 곳에 변수를 설정합니다.
React처럼 값을 설정하는 함수는 필요하지 않습니다.하지만 필요한 것은value에bind:를 추가하는 것입니다.

참조

https://svelte.dev/tutorial/text-inputs

함수를 서브어셈블리에 전달

추가할 사용자 목록은 부모 구성 요소에 값을 저장하려고 하기 때문에 사용자를 추가하는 과정은 부모 구성 요소에서 이루어집니다.
Svelte는 서브어셈블리에 function을 전달할 수도 있습니다.
App.svelte

<script>
  import InputForm from './InputForm.svelte'

  let users = []

  function addUser(form) {
    users = [
      ...users,
      {
        firstName: form.firstName,
        lastName: form.lastName,
      },
    ]
  }
</script>

상위 구성 요소의 script에서 addUser<InputForm {addUser} />를 정의하여 하위 구성 요소에 전달합니다.
짧은 손으로 짧은 코드로 실현할 수 있다.
InputForm.svelte

<script>
  export let addUser

  let form = {
    firstName: '',
    lastName: '',
  }

  function onClickAddButton() {
    addUser(form)
    form.firstName = ''
    form.lastName = ''
  }
</script>

<div className="input-field">
  <label htmlFor="first_name">First Name</label>
  <input id="first_name" type="text" bind:value={form.firstName} />
</div>
<div className="input-field">
  <label htmlFor="last_name">Last Name</label>
  <input id="last_name" type="text" bind:value={form.lastName} />
</div>
<button class="btn waves-effect waves-light" on:click={onClickAddButton}>
  Add
</button>

InputForm.svelt를 수정했습니다.
부모 구성 요소에서 전달된 함수는 현재 export let addUser 에서 사용할 수 있습니다.
React에서 Object 값의 업데이트를 사용할 때 전체 Object가 업데이트되기 때문에 확산 문법 등을 사용해야 합니다.
그러나 Svelte는 직접 중첩된 값을 업데이트하므로 설명을 줄일 수 있습니다.

사용자 표시 테이블 구현

UserList.svelte

<script>
  export let users
</script>

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    {#each users as user}
      <tr>
        <td>{user.firstName}</td>
        <td>{user.lastName}</td>
      </tr>
    {/each}
  </tbody>
</table>

each를 사용하여 React에서 맵으로 이루어진 일을 실현했습니다.
내 생각에는 템플릿 엔진 같은 작법이겠지.
키를 설정할 필요가 없는 곳도 다르다.

참조

https://svelte.dev/tutorial/each-blocks

완성

완성된 코드는 이쪽으로 넘어가고 GitHub.

느끼다

React: 약 130행 Svelte: 약 80행
개인적으로this.state.hoge 등 React의 쓰기에 익숙해져서 적은 코드에 대해 불안하지만 익숙해지면 편하게 쓸 수 있을 것 같아요.
프레임워크를 접하지 못한 사람과 Vue 사용에 있어 쉽게 잡을 수 있는 좋은 개발 체험을 느낄 수 있으니 꼭 한번 시도해 보세요.