Vue.js로 todolist 만들기 - 문제점 및 해결 방법

Yuri Lee·2020년 9월 24일
0

현재 애플리케이션 구조의 문제점

  • 할 일을 입력했을 때 바로 목록에 반영 X
  • 할 일을 모두 삭제했을 때 할 일 목록에 바로 반영 X

문제 해결을 위한 애플리케이션 구조 개선
같은 데이터 속성을 사용하기 위해 최상위(루트) 컴포넌트 App 컴포넌트에 items라는 데이터를 정의하고, 하위 컴포넌트 list에 props를 전달하자.


그 전에는 할 일 데이터 추가, 삭제 모두 하위 컴포넌트 Input, List 에서 했다. 하지만 이제 vue 데이터 속성 Items와 로컬 스토리지의 데이터 조회, 추가, 삭제를 모두 app component에서 진행!

하위 컴포넌트들은 그 데이터를 표현하거나, 데이터 조작에 대한 요청(이벤트만 발생)만 하는 것!

Input.vue

this.$emit('addTodo', value);

TodoInput 컴포넌트의 addTodo()메서드에 위와 같은 코드를 추가하였다. 이벤트를 전달할 때 할 일 텍스트 값인 value 객체를 인자 값으로 전달한다.

App.vue

  methods : {
    addTodo(Item) {
      // 로컬 스토리지에 데이터를 추가하는 로직 
      localStorage.setItem(Item, Item);
      this.Items.push(Item);
    }
  }
  • 버튼을 클릭하면 TodoInput 컴포넌트에서 App 컴포넌트 신호를 보내 App 컴포넌트의 addTodo 메서드를 실행함.
    addTodo()의 인자 값 Item은 Input 컴포넌트에서 올려 보낸 할일 텍스트임. 이것을 로컬 스토리지에 저장하고, app 컴포넌트의 itmes 데이터 속성에도 추가함.

컴포넌트 간 이벤트 전달은 '하위 컴포넌트에서 발생시킨 이벤트를 상위 컴포넌트에서 받아 상위 컴포넌트의 메서드를 동작시키는 것'

App.vue

  methods : {
    clearAll() {
      localStorage.clear();
      this.Items = [];
    },

clearAll()메서드는 Footer 컴포넌트의 clear all 버튼을 클릭했을 때 로컬 스토리지의 데이터를 모두 삭제하고 Items 데이터를 비운다.

footer.vue

  methods: {
    clearTodo() {
      this.$emit('removeAll')
      // 로컬 스토리지의 데이터를 모두 삭제함 
    }
  }

footer의 clear all 버튼을 클릭하면 removeAll 이벤트를 발생시켜 상위 컴포넌트 (App.vue)로 전달함. 그럼 상위 컴포넌트에서 removeAll을 받아 상위 컴포넌트에 정의된 clearAll()를 실행함.

[❗]
$emit() API 형식과 전달 인자의 규칙
하위 컴포넌트에서 이벤트를 발생시켜 상위 컴포넌트로 신호를 보낼 때 $emit()을 사용함

API기본 형식은
$emit('이벤트 이름')이지만 $emit('이벤트 이름', 인자1, 인자2, ..)와 같은 형식으로 하위 컴포넌트의 특정 데이터를 전달할 수 있음!!

주의할 점은 전달받은 인자 값은 상위 컴포넌트에서 참고용으로만 활용하기! 데이터 값은 변경하지 말아야 함!

결론: 컴포넌트가 불리되어 데이터를 공유하지 못했던 문제점을 props속성, 이벤트 전달로 해결함 😀😀😀


[Reference]

Do it Vue.js 입문(이지스퍼블리싱)

profile
Step by step goes a long way ✨

0개의 댓글