인프런 커뮤니티 질문&답변

좋아요 구현을 위해 append_message 함수에서 icon 생성 시 addEventListener를 등록하였습니다.

append_message(message, pk , sender, time, img){
    const like_icon = document.createElement('i');
    like_icon.id = `like-icon-${pk}`;
    like_icon.className = 'fa-regular fa-heart';
    like_icon.addEventListener('click', () => {this.like_msg(pk)});
...
}

like_msg에서 removeEventLister를 통해 기존에 등록된 click를 해제하고 새로운 이벤트를 등록하였습니다.

like_msg(pk){
    const like_icon = document.querySelector(`#like-icon-${pk}`);
    like_icon.removeEventListener('click', () => {this.like_msg(pk)});
    like_icon.addEventListener('click', () => {this.dislike_msg(pk)});
    this.ws.send(JSON.stringify({
         type : 'chat.message.like',
          pk : pk
     }))
}

1. 사진과 같이 좋아요는 잘 작동합니다.

다시 dislike를 하려면 계속 like_msg 이벤트가 동작합니다.

1. like_icon을 통해서 하트를 변경하였습니다.

   case 'chat.message.like':
       this.like_icon(pk, cnt);
       break;

event를 삭제하는 시점이 잘 못된것일까요? 제대로 삭제가 안 되더라구요. like_icon에서도 removeEventListener를 실행했었는데 동일한 결과가 나왔습니다. 어떤 시점에서 이벤트 리스너를 해제해야 할까요?