[React] 일기장에 추가한 배열 데이터 삭제하기 ; 프롭스 드릴링?

일기장 리스트 컴포넌트 에 일기장 기록을 삭제할 수 있는 버튼을 만들어준다

                  //지우고자하는 타겟id
  const onDelete = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다`);
  }

삭제를 위해 App.js에 onDelete 함수를 추가해준다.

프롭스 드릴링(Props Drilling)?

삭제하기를 눌렀을 때 onDelete가 어디로 전달되는 지 과정을 생각해보면
DiaryItem의 부모인 DiaryList가 프롭스로 onDelete를 받은 후 DiaryList에서 DiaryItem으로 내려준다
이처럼 해당 데이터를 받기위해 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 하는 과정을 프롭스 드릴링 이라고한다.

위처럼 DiaryItem에게 전달하기위해 List에도 onDelete함수를 추가해주고

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

버튼을 누르면 바로 삭제가 아닌 알람창이 뜨도록 window.confirm 을 사용했다.

DiaryItem에서 targetId값까지 잘 나온걸 확인 했다.

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

onDelete함수 수행 끝부분 setData가 onCreate때와 마찬가지로 data의 state를 targetId를 포함하지 않은 배열로 바꾼 후 setData의 값으로 랜더링해준다.

결과

2번째 일기가 삭제되고

1개의 일기가 남았다



참고:
- 한 입 크기로 잘라먹는 리액트