[Udemy Vue 완벽가이드 Section8] 102. 데모: 더 많은 컴포넌트 통신 추가하기

이번에는 친구 삭제 작업을 해보자.

FriendContact.vue 컴포넌트에 새로운 버튼을 추가하자.

클릭을 수신하면, deleteFriend 메서드를 트리거하도록 하자.

<button @click="deleteFriend">Delete</button>

deleteFriend(){
 this.$emit('delete', this.id);
}

 

위와 같이 작성해도 되고, 별도의 메서드를 사용하지 않고 template에서 바로 $emit을 호출하면 된다. (아래 코드 참조)

(이벤트에 바인딩 할때는 메서드를 가리켜 메서드를 실행하거나, 다른 기본 JS 코드를 실행할 수 있다.)

template에서는 항상 그렇듯이 this키워드는 없어도 된다.

<buttton @click="$emit('delete', id)">Delete</button>

별도의 메서드를 사용하든, template에 바로 $emit을 호출하든 delete 이벤트가 있다는걸 표시하기 위해 emits 프로퍼티에 추가하자.

 

이제 FriendContact 컴포넌트에서 발생한 커스텀 이벤트를 App.vue파일에서 수신할 수 있다.

 

 

App.vue 파일

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
          isFavorite: true,
        },
        {
          id: "julie",
          name: "Julie Johnes",
          phone: "0456 35353 93",
          email: "julie@localhost.com",
          isFavorite: true,
        },
      ],
    };
  },
  methods: {
    toggleFavoriteStatus(friendId) {
      const identifiedFriend = this.friends.find(
        (friend) => friend.id === friendId
      );
      identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
    },
    deleteContact(friendId) {
      this.friends = this.friends.filter((friend) => friend.id !== friendId);
      //data프로퍼티인 friends배열을 가져와 filter내 함수를 통과시킨다.
      //배열을 덮어쓰고 새 배열에 통과된 요소들을 할당한다. 그리고 그 배열을 data프로퍼티인 friends에 덮어쓴다..
    },
  },
};

</script>

 

Array.filter()

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

 

filter함수는 JS 내장 메서드이다. 호출하는 배열에 기반한 새 배열을 반환한다. 호출한 배열에서 필터링한 요소를 제외한 배열만 반환한다.

따라서 filter에는 함수를 인수로 제공해야한다. 함수가 true를 반환하면 요소가 유지되고, false를 반환하면 요소가 없어진다.

 

JS에 의해 요소를 입력값으로 자동 수신하는 함수이므로, friends에 있는 모든 friend 상대로 실행되며, JS가 friend를 하나하나 입력해준다. 항목을 남기려면 true, 없애려면 false를 반환해야한다.

참고로, 화살표 함수구문은 JS에서 함수를 작성하는 방법 중 하나이다.

ex

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);
//['exuberant', 'destruction', 'present']

 

이렇게 friendId를 가지는 친구를 뺀 새 friends배열을 생성하고, 그 배열을 friends 데이터 프로퍼티에 저장한다.

그럼 Vue가 friends의 변경사항을 감지한다. 변경을 감지하면 해당 friends 목록을 리렌더링하고 UI를 업데이트한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.