[TODO App] 동적 앱 만들기 (TodoInput.vue)

(TodoHeader.vue는 기능이 딱히 없으므로 css 적용까지만 했습니다.)

Vue.js 동적 앱 만들기 - TodoInput 컴포넌트 구현

지금까지는 정적 HTML만 완성했기 때문에 앱이 동작하지 않을 것입니다.

이제 data와 methods를 추가하여 동적인 앱으로 만들어봅시다!
이번 포스트에서는 TodoInput.vue 컴포넌트에 대해서만 다루겠습니다.

1. data()에 입력값을 받을 변수 지정하기

Vue.js에서 사용자 입력을 처리하기 위해서는 먼저 data() 함수에 입력값을 저장할 변수를 정의해야 합니다.

export default {
  data() {
    return {
      newTodo: "", // 사용자 입력값을 저장할 변수
    };
  },
  // ... 나머지 코드
};

왜 data()에 변수를 정의해야 할까요?

1. 반응형 데이터 시스템: Vue.js는 data()에 정의된 변수들을 반응형으로 관리합니다
2. 자동 UI 업데이트: 변수 값이 변경되면 관련된 UI 요소들이 자동으로 업데이트됩니다
3. 상태 관리: 컴포넌트의 현재 상태를 체계적으로 관리할 수 있습니다

newTodo 변수의 역할

• 입력값 저장: 사용자가 입력 필드에 타이핑한 내용을 임시로 저장합니다
• v-model 연결: 템플릿의 v-model="newTodo"와 연결되어 양방향 데이터 바인딩을 구현합니다
• 초기값 설정: 빈 문자열("")로 초기화하여 입력 필드가 비어있는 상태로 시작합니다

2. methods에 할 일 추가 기능 구현하기

이제 사용자가 입력한 할 일을 처리하는 메서드들을 구현해보겠습니다.

export default {
  data() {
    return {
      newTodo: "",
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo !== "") {
        var obj = { completed: false, item: this.newTodo };
        localStorage.setItem(this.newTodo, JSON.stringify(obj));
        this.clearInput();
      }
    },
    clearInput() {
      this.newTodo = "";
    },
  },
};

addTodo() 메서드 분석

1) 입력값 검증

if (this.newTodo !== "") {
  // 빈 문자열이 아닐 때만 실행
}

• 유효성 검사: 사용자가 빈 내용을 입력하는 것을 방지합니다
• this.newTodo: data()에 정의된 반응형 데이터에 접근합니다

2) Todo 객체 생성

var obj = { completed: false, item: this.newTodo };

• 객체 리터럴: 간결한 문법으로 객체를 생성합니다
• completed: 할 일의 완료 상태를 나타내는 boolean 값 (초기값: false)
• item: 사용자가 입력한 할 일 내용

3) localStorage에 저장

localStorage.setItem(this.newTodo, JSON.stringify(obj));

• localStorage: 브라우저의 로컬 저장소에 데이터를 저장합니다
• JSON.stringify(): JavaScript 객체를 JSON 문자열로 변환합니다
• 키-값 쌍: 입력한 할 일 내용을 키로, Todo 객체를 값으로 저장합니다

4) 입력 필드 초기화

this.clearInput();

• 메서드 호출: 다른 메서드를 호출하여 코드를 재사용합니다

clearInput() 메서드 분석

clearInput() {
  this.newTodo = "";
}

• 입력 필드 비우기: newTodo를 빈 문자열로 설정합니다
• UI 자동 업데이트: Vue의 반응형 시스템이 자동으로 입력 필드를 비웁니다

3. 템플릿에서 이벤트 연결하기

이제 HTML 템플릿에서 사용자 상호작용을 처리하는 이벤트를 연결해보겠습니다.

<template>
  <div class="inputBox shadow">
    <input
      type="text"
      placeholder="할 일을 입력하세요"
      v-model="newTodo"
      @keyup.enter="addTodo"
    />
    <span class="addContainer" @click="addTodo">
      <i class="fa-solid fa-plus addBtn"></i>
    </span>
  </div>
</template>

v-model 디렉티브

v-model="newTodo"

• 양방향 바인딩: 입력 필드의 값과 data()의 newTodo 변수를 연결합니다
• 실시간 동기화: 사용자가 타이핑할 때마다 자동으로 변수 값이 업데이트됩니다

키보드 이벤트 처리

@keyup.enter="addTodo"

• Enter 키 감지: 사용자가 Enter 키를 누르면 addTodo 메서드가 실행됩니다
• 사용자 경험 향상: 키보드만으로도 할 일을 추가할 수 있습니다

클릭 이벤트 처리

@click="addTodo"

• 마우스 클릭: 플러스 아이콘을 클릭해도 addTodo 메서드가 실행됩니다
• 다양한 입력 방식: 키보드와 마우스 모두 지원합니다

4. 전체 데이터 흐름 이해하기

1. 초기 상태: newTodo는 빈 문자열("")로 초기화됩니다
2. 사용자 입력: 사용자가 입력 필드에 타이핑하면 v-model이 newTodo 값을 업데이트합니다
3. 이벤트 발생: Enter 키나 클릭으로 addTodo 메서드가 호출됩니다
4. 데이터 검증: newTodo가 빈 문자열이 아닌지 확인합니다
5. 객체 생성: Todo 객체를 생성하여 완료 상태와 할 일 내용을 저장합니다
6. 데이터 저장: JSON.stringify()로 객체를 문자열로 변환하여 localStorage에 저장합니다
7. UI 초기화: clearInput()으로 입력 필드를 비우고 다음 입력을 준비합니다

5. 완성된 TodoInput.vue 컴포넌트

<template>
  <div class="inputBox shadow">
    <input
      type="text"
      placeholder="할 일을 입력하세요"
      v-model="newTodo"
      @keyup.enter="addTodo"
    />
    <span class="addContainer" @click="addTodo">
      <i class="fa-solid fa-plus addBtn"></i>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: "",
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo !== "") {
        var obj = { completed: false, item: this.newTodo };
        localStorage.setItem(this.newTodo, JSON.stringify(obj));
        this.clearInput();
      }
    },
    clearInput() {
      this.newTodo = "";
    },
  },
};
</script>

이제 TodoInput 컴포넌트가 완전히 동작하는 앱이 되었습니다! 사용자가 할 일을 입력하고 Enter 키나 플러스 버튼을 클릭하면 localStorage에 저장되고 입력 필드가 자동으로 비워집니다.

다음 포스트에서는 TodoList 컴포넌트를 구현하여 저장된 할 일들을 화면에 표시하는 방법을 알아보겠습니다!