emit

• Vue 구성 객체 중 data, methods, computed, watch, props... 말고도 또 emit 이라는 속성값이 있다.

• 이 emit은 props에 대응한다. 무슨말이냐면
  props에서는 컴포넌트가 수신하는 프로퍼티를 정의했고
  emits에서는 컴포넌트가 어떠한 시점에 발생시킬 커스텀 이벤트를 정의하는 것이다.

• 컴포넌트에 적어두면 이 컴포넌트의 작동 방식과 어떤 이벤트를 수신하는지 등을 다른 개발자가 명확하게 알 수 있기 때문이다. 만약 이런 설명이 없다면 특정 메서드를 발생시키는 게 어딘지 코드를 그냥 전부 뒤져보는 수밖에 없기 때문이다.

• 그러면 컴포넌트에 해당 식별자가 포함된 이벤트를 끌어내는 어떤 코드가 있다는 걸 분명히 해준다.

<script>
  emits:['toggle-favorite'],
  methods:{
    toggleDetails(){
      this.detailAreVisible = !this.detailAreVisible
    },
    toggleFavor(){
      // this.favor = !this.favor
      this.$emit('toggle-favorite', this.id);
    }
</script>

• 또는 props 처럼 그냥 나열하는 것이 아닌, 객체로서 조금 더 디테일한 설정을 할 수 있다.

  emits:{
    'toggle-favorite':function (id){
      // 유효성 검사 로직
      if(id){
        return true
      } else {
        return false
      }
    }
  },

• 물론 <script> 단에서 emit, methods를 작성해주면 좋지만 귀찮다면 <tamplate>단에서 한 큐에 해결할 수 있다.

기존 작성방식

<template>
	...
    <button @click="deleteContact">Delete</button>
    ...
</template>

<script>
  emits:['deltet-contact'],
  methods:{
  	...
    deleteContact(){
      this.$emit('delete-contact', this.id);
    }
  }
</script>

<template>에서 일괄 작성

<template>
	...
    <button @click="$emit('delete-contact',id)">Delete</button>
    ...
</template>

<script>
  emits:['deltet-contact']
</script>

부모 컴포넌트

<template>
	...
      <friend-contact
      	  ...
          @delete-contact="deleteContact"
      ></friend-contact>
    ...
</template>

<script>
	methods:{
    	deleteContact(id){
        	this.friends = this.friends.filter(friend=> friend.id !== id)
        }
    }
</script>

• JavaScript로 삭제할 항목이 보유하는 어떠한 정보에 기반해 배열을 삭제하는 방법은 배열을 덮어쓰고 배열에 저장된 프로퍼티에 새 값을 할당하는 것이다.

• 그리고 이전 배열을 가져오는데 이때 filter 메서드를 호출한다.

• filter는 JavaScript 내장 메서드인데 호출하는 배열에 기반한 새 배열을 반환한다. 호출한 배열에서 우리가 필터링한 요소를 제외한 배열만 반환한다. 따라서 filter에는 함수를 인수로 제공해야 한다.

• 함수가 참을 반환하면 요소가 유지되고 거짓을 반환하면 요소가 없어진다.

filter vs splice

• 둘다 삭제기능을 만들 수 있는 메서드들이다. 그럼 무슨 차이가 있을까
  우선 가장 큰 차이는 filter는 새로운 array를 뱉어낸다는 것에서 큰 차이가 있다. 이는 메모리를 새로 할달한다는 것이다.

• 그렇다면 삭제기능을 구현할 때 filter와 slice 어느것을 써야할까?
  사실 힌트는 위에 있다. 쉽게 말하면 마크업 코드에 data(){}에 참조되어있는 값이 있다면 filter, 없다면 splice를 쓰면 편하다.