To-Do 리스트 애플리케이션에서 add 컴포넌트와 list 컴포넌트를 분리하는 작업을 하겠습니다.
컴포넌트를 분리하면 코드의 모듈화가 가능해지고, 각 컴포넌트가 자신의 역할에만 집중할 수 있게 됩니다.
이 과정에서 Vue.js의 컴포넌트 간 데이터 전달(props와 events)을 이해하는 데도 도움이 됩니다.
1. AddTodo.vue 컴포넌트 생성
1. AddTodo.vue 파일 생성:
• src/components 디렉토리 안에 AddTodo.vue 파일을 생성합니다.
2. AddTodo.vue 초기 코드 작성:
• 이 컴포넌트는 새로운 할 일을 입력하고 추가하는 역할을 합니다.
<template>
<div>
<input v-model="newTodo" placeholder="Add a new to-do" @keyup.enter="submitTodo" />
<button @click="submitTodo">Add</button>
</div>
</template>
<script>
export default {
name: 'AddTodo',
data() {
return {
newTodo: ''
};
},
methods: {
submitTodo() {
if (this.newTodo.trim()) {
this.$emit('add-todo', this.newTodo);
this.newTodo = ''; // 입력 필드 초기화
}
}
}
};
</script>3. 기능 설명:
• newTodo라는 로컬 데이터 속성을 가지고 있으며, 사용자가 할 일 텍스트를 입력합니다.
• 사용자가 Enter 키를 누르거나 “Add” 버튼을 클릭하면 submitTodo 메서드가 호출됩니다.
• submitTodo 메서드는 add-todo 이벤트를 상위 컴포넌트로 발송(emit)하여 입력된 할 일을 전달합니다.
2. TodoList.vue 컴포넌트 생성
1. TodoList.vue 파일 생성:
• src/components 디렉토리 안에 TodoList.vue 파일을 생성합니다.
2. TodoList.vue 초기 코드 작성:
• 이 컴포넌트는 할 일 리스트를 렌더링하고, 할 일 항목을 삭제하는 역할을 합니다.
<template>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.completed" @change="saveTodos" />
<span :class="{ completed: todo.completed }">{{ todo.text }}</span>
<button @click="removeTodo(index)">Delete</button>
</li>
</ul>
</template>
<script>
export default {
name: 'ToDoList',
props: {
todos: {
type: Array,
required: true
}
},
methods: {
removeTodo(index) {
this.$emit('remove-todo', index);
},
saveTodos() {
this.$emit('save-todos');
}
}
};
</script>
<style>
.completed {
text-decoration: line-through;
color: grey;
}
</style>3. 기능 설명:
• todos 배열을 props로 받아와서 리스트를 렌더링합니다.
• 각 할 일 항목의 체크박스 상태를 변경하면 saveTodos 메서드가 호출되어, 상위 컴포넌트로 상태 저장 이벤트(save-todos)를 발송합니다.
• “Delete” 버튼을 클릭하면 해당 항목을 삭제하기 위한 remove-todo 이벤트를 발송합니다.
3. App.vue 파일 수정
1. AddTodo와 TodoList 컴포넌트 가져오기:
• App.vue 파일에서 새로 생성한 두 컴포넌트를 가져오고, 이를 사용해 To-Do 리스트를 완성합니다.
<template>
<h1>Vue.js To-Do App</h1>
<add-todo @add-todo="addTodo" />
<to-do-list :todos="todos" @remove-todo="removeTodo" @save-todos="saveTodos" />
</template>
<script>
import AddTodo from './components/AddTodo.vue';
import ToDoList from './components/ToDoList.vue';
export default {
name: 'App',
components: {
AddTodo,
ToDoList
},
data() {
return {
todos: []
};
},
mounted() {
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
this.todos = JSON.parse(savedTodos);
}
},
methods: {
addTodo(newTodo) {
this.todos.push({ text: newTodo, completed: false });
this.saveTodos();
},
removeTodo(index) {
this.todos.splice(index, 1);
this.saveTodos();
},
saveTodos() {
localStorage.setItem('todos', JSON.stringify(this.todos));
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2. 기능 설명:
• AddTodo 컴포넌트에서 발송된 add-todo 이벤트를 받아 addTodo 메서드를 호출합니다.
• TodoList 컴포넌트에서 발송된 remove-todo와 save-todos 이벤트를 처리하여 할 일 리스트를 관리하고 로컬 스토리지에 저장합니다.
• 로컬 스토리지에서 할 일 목록을 불러오고, 이를 todos 배열에 저장합니다.
요약
1. AddTodo.vue: 사용자가 할 일을 입력하고 추가하는 기능을 담당하는 컴포넌트.
2. TodoList.vue: 할 일 목록을 렌더링하고, 항목을 삭제하거나 완료 상태를 관리하는 컴포넌트.
3. App.vue: 상위 컴포넌트로서, AddTodo와 TodoList 컴포넌트를 포함하고, 할 일 데이터를 중앙에서 관리하는 역할을 수행.
이전블로그
로컬스토리지 통한 to-do list 구현
https://juntcom.tistory.com/317
'프론트엔드 > Vuejs' 카테고리의 다른 글
| vue to-do 리스트 구현 5 - router 구현 (0) | 2024.08.17 |
|---|---|
| vue to-do 리스트 구현 4 - vuetify 적용 (0) | 2024.08.16 |
| vuejs to-do 리스트 구현 2 - 로컬스토리지 (0) | 2024.08.16 |
| vuejs 로 to-do 리스트 구현 1 (0) | 2024.08.16 |
| vuejs 개발시 참고할 레퍼런스 모음 (0) | 2024.08.16 |
