미라클 메모리

목차

Delete 구현하기

// app
const onDelete = (targetId) => {
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setDate(newDiaryList);
    console.log(`${targetId} 가 삭제되었습니다.`);
  };

Array.prototype.filter() - JavaScript | MDN

Delete를 구현할 때는 Filter 함수를 사용한다 전달받은 targetId 값을 통해서 현재 data 상태값을 순회하면서 해당 id값이 일치하는 값이 있을 경우 필터링 하여 다시 배열을 구성한다.

setDate(newDiaryList);

그렇게 다시 구성된 배열을 새로운 상태값으로 전달한다.

삭제버튼

// item
		<button
        onClick={() => {
          console.log(id);
          if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
            onDelete(id);
          }
        }}
      >
        삭제하기
      </button>

item 컴포넌트에서는 삭제버튼을 누르면 List에서 전달받은 id값을 onDelete 함수를 통해서 전달한다. 앞서 보았던 것처럼 App컴포넌트 에서는 해당 매개변수를 targetId로 전달받아 필터링을 거친후 상태값을 변경한다.

Window.confirm 활용해먹기

Window.confirm() - Web API | MDN

특히나 이 window confirm이 정말 꿀팁이다. 해당 메세지 칸을 통해서 현재 전달하려는 id 값을 바로바로 시각적으로 확인할 수 있어서 편리하다 앞으로 자주 사용해야겠다.

Props - drilring

<aside> 💡 props 드릴링이란 부모에서 보낸 props가 자식 컴포넌트의 자식컴포넌트까지 연이어 전달되는 현상을 의미하는데 이는 마치 드릴을 뚫고 props가 계속해서 내려간다.

</aside>