230609 event.target으로 이벤트가 발생한 대상 얻기

❓ Problem

분명 리뷰 삭제 기능이 제대로 작동한다고 생각했는데...
이제 수정 기능 구현해보려고 들어갔더니 아니었습니다...!?
원하는 리뷰가 삭제 되는 것이 아니라 가장 최신 리뷰만 삭제 되더라고요?

코드를 다시 보니 당연한 것이었습니다😱

// (5) 리뷰 삭제
const deleteComment = () => {

  // 비밀번호 입력 받기
  let password = prompt(“비밀번호를 입력하세요“);
  
  // 저장된 데이터 가져오기
  let storedData = localStorage.getItem(“myData”);
  
  // 저장된 데이터가 있는 경우
  if (storedData !== null) {
    let infoArray = JSON.parse(storedData);
    
    // commnetid와 localstorage의 id가 같은지 확인
    const commentId = document.querySelector(“.comment”).id;
    const filteredComment = infoArray.find(
      (data) => data.commentId === commentId
    );
    
    // 비밀번호 확인
    if (filteredComment && filteredComment.password === password) {
      infoArray = infoArray.filter((data) => data.commentId !== commentId);
      let jsonData = JSON.stringify(infoArray);
      localStorage.setItem(“myData”, jsonData);
      printData();
    } else {
      alert(“비밀번호가 일치하지 않습니다.“);
    }
  }
  window.location.reload();
};

모든 리뷰의 class명은 "comment"로 동일하게 설정되어 있었고,
const commentId = document.querySelector(“.comment”).id;
같은 class명을 가진 요소들이 여러개가 있을 때, 저처럼 접근하게 되면 첫 번째 요소를 가지고 온다고 합니다.
그러니까 당연히!! 가장 최신 댓글만 삭제되는 것이었습니다.
애초에 제 로직엔 제가 삭제하고자 한 리뷰를 찾는 로직이 없는데 왜 이걸 몰랐을까...🤭

📚 Try

아무튼 처음부터 가장 고민이었던 '내가 삭제하고자 하는 리뷰'를 확인하는 방법이라는 난관에 다시 부딪혔고,
리뷰 태그 요소 어딘가에 id 값을 주고 그 id를 localStorage에 저장해서 둘을 비교하면 되지 않을까 생각했지만 위와 같은 이유로 실패했다...🥺

그러던중 event.target에 대해 알게 되었다!
event.target을 사용하면 이벤트가 발생한 대상 혹은 그 대상의 요소를 받을 수 있다는 것!!
이걸 사용해서 내가 선택한 리뷰의 삭제 button을 받아오면 '내가 삭제하고자 하는 리뷰'를 찾을 수 있을 것 같았다!! (야호~~~👏)

📖 Solution

event.target을 통해 내가 삭제하고 싶은 리뷰 삭제하는 방법!!

⭐️ STEP 1 ) 삭제 버튼을 눌렀을 때, event를 매개변수로 받아 함수를 호출하도록 하기!

      deleteBtn.addEventListener("click", (event) => deleteComment(event));

삭제 버튼을 누르면 deleteComment함수는 이벤트 객체를 매개변수로 받아서 처리할 수 있도록 합니다.

⭐️ STEP 2 ) 삭제 버튼에 고유의 id 값 부여하기!

      deleteBtn.setAttribute("id", info.buttonId);

저는 uuid를 사용해서 버튼에 id값을 주고, 그 id 값을 localStorage에도 저장해주었습니다.

⭐️ STEP 3 ) event.target.id로 내가 선택한 삭제 버튼의 id 가져오기!

// (5) 리뷰 삭제
const deleteComment = (event) => {
  // 비밀번호 입력 받기
  let password = prompt("비밀번호를 입력하세요");

  // 저장된 데이터 가져오기
  let storedData = localStorage.getItem("myData");

  // 저장된 데이터가 있는 경우
  if (storedData !== null) {
    let infoArray = JSON.parse(storedData);

    // buttonid와 localstorage의 buttonid가 같은지 확인
    const buttonId = event.target.id;
    const filteredComment = infoArray.find(
      (data) => data.buttonId === buttonId
    );

    // 비밀번호 확인
    if (filteredComment && filteredComment.password === password) {
      infoArray = infoArray.filter((data) => data.buttonId !== buttonId);
      let jsonData = JSON.stringify(infoArray);
      localStorage.setItem("myData", jsonData);

      printData();
    } else {
      alert("비밀번호가 일치하지 않습니다.");
    }
  }
  window.location.reload();
};

deleteComment 내에서 event.target.id를 통해 내가 선택한 리뷰의 삭제 버튼의 id값을 가져오고, localStorage에 저장된 buttonId 값과 비교하여 내가 선택한 리뷰를 제대로 삭제할 수 있습니다...!!

💡 Point

⭐️⭐️⭐️ event.target!! 을 사용하면 내가 선택한 대상의 정보를 가져올 수 있다!!!

처음 삭제 기능을 구현해보자 할 때부터 계속 풀리지 않는 의문이 도대체 내가 클릭한 삭제 버튼을 어떻게 알 수 있는가였다... 다른 로직은 다 해결이 되는데 이것만은 풀리지 않다가 결국 해결할 수 있었다 😭 😭
생각보다 간단한 거였지만,,, 몰랐던 나에겐 너무 어려웠던 것 이 방법으로 수정 기능도 구현해보면 될 것 같다 ㅎㅎ...