쏘니의 개발블로그

To-Do 리스트를 구현하기 위해 새로운 컴포넌트를 만드는 방법을 단계별로 설명드리겠습니다.

이 설명을 따라 새로운 컴포넌트를 만들고 App.vue에서 이를 사용해 To-Do 리스트를 구현할 수 있습니다.

1. 새로운 컴포넌트 생성

1. ToDoList.vue 파일 생성:

• src/components 디렉토리 안에 ToDoList.vue 파일을 생성합니다.

2. ToDoList.vue 초기 코드 작성:

• 아래 코드를 ToDoList.vue 파일에 추가합니다.

• 이 코드는 To-Do 리스트 항목을 추가하고, 리스트를 렌더링하는 기본적인 구조입니다.

<template>
  <div>
    <h2>To-Do List</h2>
    <input v-model="newTodo" placeholder="Add a new to-do" @keyup.enter="addTodo" />
    <button @click="addTodo">Add</button>
    
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ToDoList',
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: grey;
}
</style>

2. App.vue 파일 수정

1. ToDoList 컴포넌트 가져오기:

• App.vue 파일에서 ToDoList.vue 컴포넌트를 가져오고, 등록합니다.

<template>
  <div id="app">
    <h1>Vue.js To-Do App</h1>
    <ToDoList />
  </div>
</template>

<script>
import ToDoList from './components/ToDoList.vue';

export default {
  name: 'App',
  components: {
    ToDoList
  }
};
</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. 컴포넌트 실행 및 테스트:

• 프로젝트를 실행하여 ToDoList.vue 컴포넌트가 정상적으로 렌더링되고, 할 일 항목을 추가, 삭제할 수 있는지 확인합니다.

3. 스타일 및 추가 기능

1. 스타일 개선:

• ToDoList.vue 파일에 추가 스타일을 적용하여 UI를 더 예쁘게 꾸밀 수 있습니다.

• 예를 들어, 인풋 필드, 버튼, 리스트 항목 등에 스타일을 적용할 수 있습니다.

2. 추가 기능 구현:

• 할 일 목록을 로컬 스토리지에 저장하여 새로고침 후에도 유지되도록 하거나, 완료된 항목을 숨기거나 필터링하는 기능을 추가할 수 있습니다.

이전 블로그 

Vue.js 프로젝트 설정 - vue cli 시작하기

https://juntcom.tistory.com/284