Vue 3 Composition API로 Todo 앱 빌드

Dec 12 2022

Composition API는 Vue 3의 중요한 발전이었습니다. 이것은 사용자가 Options API를 사용할 때와 같이 옵션을 표현하는 대신 기능을 가져와서 Vue의 일부를 사용할 수 있도록 하는 API 그룹으로 구성됩니다.

이 기사에서는 Vue 3 Composition API를 사용하여 작업 추적기를 빌드할 것입니다. 다음은 애플리케이션 데모 에 대한 링크 입니다.

컴포지션 API란 무엇입니까?

Options API의 대안으로 Vue 앱을 만드는 새로운 방법이 Vue 3에 도입되었습니다. 이것은 개발자가 가져온 함수를 사용하여 선언적 함수를 사용하지 않고 Vue 구성 요소를 만들 수 있는 기능 기반 API입니다.

Composition API를 사용하는 이유

수많은 옵션 간의 논리적 데이터 분포로 인해 선택적 API를 사용하는 대규모 Vue 애플리케이션을 확장하는 것은 매우 열광적이고 까다로울 수 있습니다. 그러나 Composition API는 옵션으로 나누어진 모든 데이터를 함께 모아 보다 유연하고 이해하기 쉽게 만들어 이를 수정합니다.

컴포지션 후크

Composition API는 많은 사용자 지정 후크와 함께 제공되며 이 중 일부는 이 문서에서 사용할 것입니다. 시작하기 전에 후크와 사용법에 대해 알아보겠습니다.

Ref : ref 후크는 로컬 상태를 만드는 데 사용됩니다.
감시 : 감시 후크는 반응 상태의 변경이 감지되는 즉시 이벤트를 시작합니다.
OnMounted : onMounted 후크는 구성 요소가 마운트된 직후 콜백을 등록하는 수명 주기 후크입니다.

이 튜토리얼을 따라하려면 먼저 Github에서 stater 파일을 복제해야 합니다.

작업 환경 설정

Github에서 리포지토리를 복제한 후 복제된 프로젝트 디렉터리로 이동하고 터미널에서 아래 명령을 실행하여 프로젝트의 원사를 초기화하고 개발 서버도 실행합니다.

yarn && yarn dev

프로젝트가 원사로 초기화되고 브라우저에서 실행되면 몇 가지 기본 기능 생성을 시작할 수 있습니다.

전역 변수 초기화

이 섹션에서는 나중에 응용 프로그램에서 사용할 일부 전역 변수를 초기화합니다. 먼저 전체 App.vue를 아래 코드 블록으로 바꾸겠습니다.

<script setup>
import {ref, onMounted, watch} from "vue";

const todos = ref([]);
const text = ref("");

</script>

할 일 만들기

다음으로 애플리케이션에 todos를 추가하는 함수를 만들어 보겠습니다. 이를 위해 아래 코드 블록을 복사하여 script태그에 추가합니다.

<script setup>
import {ref, onMounted, watch} from "vue";

const todos = ref([]);
const text = ref("");

</script>

이 unshift메서드는 현재 항목을 배열의 시작 부분에 추가합니다.

할 일 삭제

사용자에게 원하지 않는 할 일을 목록에서 제거할 수 있는 기능을 제공합시다. 다음으로 태그 의 addTodo함수 아래에 코드를 추가합니다.<script>

function deleteTodo(todo) {
  todos.value = todos.value.filter((x) => x !== todo);
}

브라우저의 로컬 저장소에 Todo 추가

페이지 새로 고침 및 다시 로드 시 데이터 손실을 방지하기 위해 사용자 데이터를 브라우저의 로컬 저장소에 유지하려고 합니다. 이를 위해 아래 코드 deleteTodo를 <script>태그에 추가합니다.

watch(
 todos,
  (newTodoValue) => {
    localStorage.setItem("todos", JSON.stringify(newTodoValue));
  },
  { deep: true }
);

브라우저의 로컬 저장소에서 Todo 검색

마지막으로 페이지가 마운트될 때마다 브라우저의 로컬 저장소에서 할 일을 검색해 보겠습니다. 이를 위해 아래 함수를 복사하여 <script>태그에 붙여넣습니다.

onMounted(() => {
  todos.value = JSON.parse(localStorage.getItem("todos")) || [];
});

사용자 인터페이스 구축

이전 섹션에서 작업 추적기에 대한 논리 및 기능 설정을 수행했습니다. 모든 것을 사용자 인터페이스에 넣겠습니다.

Todo 입력 이벤트 처리

이 섹션에서는 앞에서 만든 논리를 사용하여 사용자의 입력 데이터를 검색하고 저장합니다.

<template>
  <main class="app">
    <section class="greeting">
      <h3 class="title">✍️ToDo Application</h3>
    </section>
    <div class="input-section">
      <section class="create-todo">
        <form @submit.prevent="addTodo">
          <h3>What do you plan on doing?</h3>
          <input
            type="text"
            placeholder="e.g. email your boss"
            v-model="text"
          />
          <input type="submit" value="Add todo" />
        </form>
      </section>
    </div>

  </main>
</template>

할 일 목록 표시

todo를 todos배열에 추가한 후 UI에서 시각화해야 합니다. 이를 위해 create-task섹션 아래에 코드를 복사하여 붙여넣습니다.

<template>
  <main class="app">

  ...    <!-- previous code block here -->

    <div class="todo-section">
      <section class="todo-list">
        <h2 v-show="todos.length === 0">No Todos Here</h2>
        <div class="list">
          <div
            v-for="todo in todos"
            :class="`todo-item ${todo.done && 'done'}`"
          >
            <label>
              <input type="checkbox" v-model="todo.done" />
            </label>
            <div class="todo-content">
              <input type="text" v-model="todo.todo" />
            </div>
            <div class="actions">
              <button class="delete" @click="deleteTodo(todo)">Delete</button>
            </div>
          </div>
        </div>
      </section>
    </div>

  </main>
</template>

이 문서의 진행 상황을 통해 다음과 같은 결과를 얻을 수 있었습니다.

자원

다음은 Github의 전체 소스 코드에 대한 링크 입니다.

결론

이 기사에서는 가장 널리 사용되는 Composition API 후크를 사용하는 방법을 배웠습니다. 또한 Vue Composition API를 사용하여 데이터 생성, 검색 및 삭제에 이르는 몇 가지 기본 작업을 수행했습니다. 후크 기반 단순성으로 인해 Composition API는 항상 Vue 3에서 가장 우수하고 중요한 기능입니다.