11. Todo - Create

간단한 Todo App 을 만들어봅니다.

목표

List State 에 새로운 Todo 를 생성합니다.

실습

추가될 Todo State 는 아래와 같습니다.

{
  id: new Date().getTime(), // 고유한 값을 주기 위해 Date 를 이용합니다.
  text: '블라블라' 
  isDone: false 
}

데이터 추가는 Header 의 Input 에 의해서 일어나게됩니다. 하지만 모든 데이터를 가지고 있는 곳은 App.vue 이기 때문에 List 에 새로운 Todo 를 추가하기 위한 함수는 App.vue 에 위치하게됩니다.

함수들은 methods 라는 곳 안에 위치하게 됩니다.

methods: {}

Todo 를 추가하기 위한 함수를 만들어보겠습니다.

// App.vue 

export default {
  // ...
  methods: {
    insertTodo(text) {
      this.todos = [
        ...this.todos, // 기존의 배열에 새로운 todo 를 추가합니다.
         {
          // id, isDone 의 경우 같은 포맷을 유지하기 때문에 새로 받지 않습니다. 
          id: new Date().getTime(), 
          text, // 유동적인 text 값만 받습니다.
          isDone: false
        }
      ];
    }
  }
};

insertTodo 함수에 전달되는 text 값은 header 에 있는 input 의 value 값 입니다. 부모와 자식사이에 이벤트를 이용하여 데이터를 주고 받을 수 있어야 합니다.

이때 필요한 개념이 on, emit 입니다. 부모는 on 을 이용하여 event 를 등록하고 자식은 emit 을 이용하여 해당 이벤트를 발생시킵니다.

Header.vue 가 자식 App.vue 가 부모의 개념입니다.

<template>
  <div id="app">
    <section class="todoapp">
      <Header @insertTodo="insertTodo" />
      <Todo :todos="todos" />
      <Footer />
    </section>
  </div>
</template>

@insertTodo 라는 custom event 를 등록을 해줍니다.

Header.vue 에서는 input 의 value 를 v-model 을 사용하여 양방향 데이터바인딩을 이용합니다.

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      v-model="text"
      autofocus
      autocomplete="off"
      placeholder="What needs to be done?"
    />
  </header>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  }
};
</script>

v-model 을 이용하면 input 의 value 가 바뀔때 text state 를 변경하게됩니다. 그 변경된 값은 다시 input의 value 가 됩니다. 이것이 양방향 데이터 바인딩인데 따로 input 에 event 를 걸어 state 를 업데이트하지 않아도 되기 때문에 편하게 사용 할 수 있습니다.

input에 값을 변경하면 저절로 text 의 값이 변경되는걸 볼 수 있습니다. 우리는 이 text 값을 이용하여 todo 를 생성할겁니다.

input 에 keypress event 를 걸어줘서 enter 가 눌렸을 때를 캐치하고자합니다. 각 키에는 고유한 숫자가 부여됩니다. enter 는 13입니다. 입력한 key 가 13일때 text 값을 부모가 등록해준 event 를 이용하여 넘겨줍니다. 그 후 text 값을 비워줍니다.

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      autofocus
      autocomplete="off"
      placeholder="What needs to be done?"
      v-model="text"
      @keypress="handleTodo"
    />
  </header>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  },
  methods: {
    handleTodo({ keyCode }) {
      const { text } = this;

      if (keyCode === 13 && text !== "") {
        this.$emit("insertTodo", text);
        this.text = "";
      }
    }
  }
};
</script>

간단하게 todo 를 추가했습니다.