Vue 3 Composition API로 ToDo 앱 만들기

안녕하세요,
컴포지션 api로 todo 앱을 만드는 방법을 알려드리겠습니다. 컴포지션 API는 Vue.js의 새로운 기능이며 React Hooks와 같습니다.

앱을 빌드해 봅시다.

1. Vue CLI로 새로운 Vue 3 프로젝트를 생성합니다.

vue create-app todo-app

2. App.vue에서 양식과 할 일 목록을 만듭니다.

<template>
    <h1>ToDo App</h1>
    <form @submit.prevent="addTodo()">
        <label>New ToDo </label>
        <input
            v-model="newTodo"
            name="newTodo"
            autocomplete="off"
        >
        <button>Add ToDo</button>
    </form>
    <h2>ToDo List</h2>
    <ul>
        <li
            v-for="(todo, index) in todos"
            :key="index"
        >
            <span
                :class="{ done: todo.done }"
                @click="doneTodo(todo)"
            >{{ todo.content }}</span>
            <button @click="removeTodo(index)">Remove</button>
        </li>
    </ul>
    <h4 v-if="todos.length === 0">Empty list.</h4>
</template>

3. 가져오기ref 패키지. 내부 값을 받아 반응적이고 변경 가능한ref 객체를 반환합니다.

<script>
import { ref } from 'vue';
</script>

4. setup 기능은 새로운 구성 요소 옵션입니다. 생성setup 함수.

<script>
import { ref } from 'vue';
export default {
  name: 'App',
  setup () {
  }
}
</script>

5. 모든 속성과 메서드를 만듭니다. 또한 데이터 저장을 위해 localStorage를 사용합니다.

<script>
    import { ref } from 'vue';
    export default {
        name: 'App',
        setup () {
            const newTodo = ref('');
            const defaultData = [{
                done: false,
                content: 'Write a blog post'
            }]
            const todosData = JSON.parse(localStorage.getItem('todos')) || defaultData;
            const todos = ref(todosData);
            function addTodo () {
                if (newTodo.value) {
                    todos.value.push({
                        done: false,
                        content: newTodo.value
                    });
                    newTodo.value = '';
                }
                saveData();
            }
            function doneTodo (todo) {
                todo.done = !todo.done
                saveData();
            }
            function removeTodo (index) {
                todos.value.splice(index, 1);
                saveData();
            }
            function saveData () {
                const storageData = JSON.stringify(todos.value);
                localStorage.setItem('todos', storageData);
            }
            return {
                todos,
                newTodo,
                addTodo,
                doneTodo,
                removeTodo,
                saveData
            }
        }
    }
</script>

그게 다야. 또한 App.vue에 SCSS 코드를 추가합니다. 데모 보기:

데모: https://todo-app.burakgur.vercel.app/

레포: https://github.com/BurakGur/vue3-composition-api-todo-app

읽어주셔서 감사합니다 😊