[실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 하위 컴포넌트 기능 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다.

본 게시글에서 다루는 사항은 투두리스트(Todo List)의 하위 컴포넌트 기능을 구현하는 과정입니다.

 

---

투두 리스트(Todo List) 구현하기

사전 준비

아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.

1. 투두 리스트 레이아웃(Todo List Layout) 구현하기: https://logs-jejustone.tistory.com/37

 

혹시라도 위에서 언급한 개념이 잘 기억나지 않으시는 분들은 아래 링크를 참조하시기 바랍니다.

• 뷰 인스턴스 상태 (Vue Instance State): https://logs-jejustone.tistory.com/27
• 뷰 이벤트 (Vue Event): https://logs-jejustone.tistory.com/26
• 뷰 데이터 바인딩 (Vue Data Binding): https://logs-jejustone.tistory.com/22

 

 

소스 코드

src\components\Practice\Todo\TodoInput.vue

Todo Item을 추가하기 위해 텍스트를 입력하고 항목으로 추가하는 이벤트/함수를 구현합니다.

<template>
    <div id="todoInput">
        <input  type="text"
                placeholder="Todo로 관리할 사항을 입력하세요."
                v-model="newItem"
                v-on:keyup.enter="addItem()"/>
        <button v-on:click="addItem()">+</button>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            newItem: ""
        }
    },
    methods: {
        addItem: function () {
            if (this.newItem.trim() !== "") {
                this.$emit("addItem", this.newItem);
                this.newItem = "";
            }
            else {
                alert("입력 필드에 값이 입력되지 않았습니다.");
            }
        },
    }
};
</script>

<style scoped>
...
</style>

<template>

• <input>
  • v-model → 입력 필드에 입력된 데이터를 뷰 데이터 속성에 연결
  • v-on:keyup.enter → 'Enter' 키 이벤트를 감지하는 속성으로 추가 버튼과 동일한 기능을 제공하기 위해 추가 버튼 클릭시 호출하는 함수 호출 
• <button>
  • v-on:click → 추가 버튼의 클릭 이벤트를 감지하여 연결된 함수 호출

<script>

• data 영역
  • newItem → 입력 필드에 작성된 텍스트가 담기는 변수
• methods 영역
  • addItem()
    • 아무것도 입력되지 않은 경우 혹은 공백만 여러개 입력한 경우에는 경고창 발생
    • $emit를 통해 상위 컴포넌트로 '항목 추가' 이벤트 시그널 및 입력된 텍스트 값 전달

 

src\components\Practice\Todo\TodoList.vue

TodoInput.vue를 통해 입력된 Todo Item에 대해서 리스트 형태로 나열하는 기능을 구현합니다.

추가적으로 각 Todo Item에 대해서 수행 여부를 남기기 위한 체크박스와 개별 삭제 기능을 제공하기 위한 이벤트 및 함수를 구현합니다.

<template>
    <div id="todoList">
        <li v-for="(todoItem, idx) in propsdata"
            v-bind:key="idx">
            
            <input  type="checkbox">
            <span> {{ todoItem.value }}</span>
            <button v-on:click="removeItem(todoItem, idx)">x</button>
        </li>
    </div>
</template>

<script>
export default {
    props: ["propsdata"],
    methods: {
        removeItem: function (todoItem, idx) {
            this.$emit("removeItem", todoItem, idx);
        }
    }
};
</script>

<template>

• <li>
  • v-for="(todoItem, idx) in propsdata" → 상위 컴포넌트에서 전달받은 propsdata를 Object 타입의 todoItem과 인덱스(idx)로 propsdata의 길이(수)만큼 반복하여 <li> 태그 표시 
  • v-bind:key → Object 타입의 todoItem을 식별할 수 있는 값 지정
  • v-model → 입력 필드에 입력된 데이터를 뷰 데이터 속성에 연결
  • v-on:keyup.enter → 'Enter' 키 이벤트를 감지하는 속성으로 추가 버튼과 동일한 기능을 제공하기 위해 추가 버튼 클릭시 호출하는 함수 호출 
• <span>
  • {{}} → 상위 컴포넌트에서 전달받은 propsdata의 객체 데이터를 텍스트로 표시
• <button>
  • v-on:click → 삭제 버튼의 클릭 이벤트를 감지하여 연결된 함수 호출

<script>

• props 영역
  • propsdata → 상위 컴포넌트에서 전달받은 데이터가 담기는 변수
• methods 영역
  • removeItem(...) → $emit를 통해 상위 컴포넌트로 '항목 삭제' 이벤트 시그널 및 선택된 항목의 인덱스(index) 값 전달 

 

src\components\Practice\Todo\TodoFooter.vue

TodoList.vue에 표시되는 Todo Item을 전체 삭제하는 이벤트/함수를 구현합니다.

<template>
    <div id="todoFooter">
        <button v-on:click="removeAll">Delete All</button>
    </div>
</template>

<script>
export default {
    methods: {
        removeAll: function() {
            this.$emit("removeAll");
        }
    }
};
</script>

<template>

• <button>
  • v-on:click → 전체 삭제 버튼의 클릭 이벤트를 감지하여 연결된 함수 호출

<script>

• methods 영역
  • removeAll() → $emit를 통해 상위 컴포넌트로 '항목 전체 삭제' 이벤트 시그널 전달 

 

src\views\Practice\PracticeTodo.vue

투두 리스트(Todo List)의 상위 컴포넌트로 위에서 구현한 각각의 하위 컴포넌트를 총괄하는 파일입니다.

보다 상세하게 다루기 위해 별도의 게시글로 작성하였으니 관련 코드는 아래 링크를 참조해주세요.

https://logs-jejustone.tistory.com/41

 

 

---

References

• HTML Tutorial: https://www.w3schools.com/html/default.asp

HTML Tutorial

• Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html

Quick Start | Vue.js