[Vue.js] app.component를 사용하여 Todo 삭제 버튼 만들기: 심층 가이드 및 활용법

 

Vue.js는 컴포넌트 기반 프레임워크입니다. 컴포넌트는 재사용 가능한 코드 블록으로, UI를 구성하고 데이터를 관리하는 데 사용됩니다. 컴포넌트를 사용하면 코드를 간결하게 유지하고 유지 관리를 용이하게 만들 수 있으며, UI를 효율적으로 구성할 수 있습니다.

이 블로그 게시물에서는 Vue.js의 app.component API를 사용하여 Todo 삭제 버튼 컴포넌트를 만드는 방법에 대해 심층적으로 다룹니다. 컴포넌트 정의, 사용, 스타일링, 테스트까지 다양한 단계를 자세히 살펴보고, 실제 사용 사례와 함께 활용법을 제시합니다. 또한, app.component API의 장점과 단점, 주의 사항 등을 다루어 컴포넌트 개발에 대한 이해를 높입니다.

1. Todo 삭제 버튼 컴포넌트: 단계별 구현

1.1 컴포넌트 정의

Todo 삭제 버튼 컴포넌트는 다음과 같이 정의됩니다.

HTML

<template>
  <button @click="handleDelete">삭제</button>
</template>

<script>
export default {
  props: {
    todoId: {
      type: Number,
      required: true
    },
    onDelete: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleDelete() {
      this.onDelete(this.todoId);
    }
  }
}
</script>

 

• 템플릿: 버튼 요소를 정의하고, 클릭 이벤트에 handleDelete 메서드를 연결합니다.
• props: todoId (삭제할 Todo 항목의 ID)와 onDelete (Todo 항목을 삭제하는 함수) props를 정의합니다.
• methods: handleDelete 메서드는 onDelete props에 전달된 함수를 호출하여 Todo 항목을 삭제합니다.

1.2 컴포넌트 사용

Todo 삭제 버튼 컴포넌트는 Todo 템플릿에서 다음과 같이 사용됩니다.

HTML

<li v-for="todo in todos" :key="todo.id">
  {{ todo.title }}
  <TodoDeleteButton :todoId="todo.id" @onDelete="handleDeleteTodo" />
</li>

코드를 사용할 때는 주의가 필요합니다.

content_copy

• v-for 지시문을 사용하여 Todo 목록을 반복합니다.
• 각 Todo 항목에 TodoDeleteButton 컴포넌트를 사용합니다.
• todoId props를 Todo 항목의 ID로 설정합니다.
• @onDelete 이벤트를 handleDeleteTodo 메서드에 연결합니다.

1.3 스타일링

Todo 삭제 버튼 컴포넌트의 스타일을 다음과 같이 CSS로 정의할 수 있습니다.

CSS

.todo-delete-button {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

 

• 버튼의 배경색, 글자색, 테두리, 패딩, 커서 스타일을 설정합니다.

1.4 테스트

Todo 삭제 버튼 컴포넌트의 기능을 다음과 같이 단위 테스트를 사용하여 테스트할 수 있습니다.

JavaScript

import { mount } from '@vue/test-utils';
import TodoDeleteButton from './TodoDeleteButton.vue';

describe('TodoDeleteButton', () => {
  it('should emit delete event when clicked', () => {
    const todoId = 1;
    const onDeleteMock = jest.fn();

    const wrapper = mount(TodoDeleteButton, {
      props: {
        todoId,
        onDelete: onDeleteMock
      }
    });

    const button = wrapper.find('button');
    button.trigger('click');

    expect(onDeleteMock).toHaveBeenCalledTimes(1);
    expect(onDeleteMock).toHaveBeenCalledWith(todoId);
  });
});