vue to-do 리스트 구현 3 - 컴포넌트 분리 및 emit 실습

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