지난 피드에서 각 컴포넌트별 댓글 추가 기능을 진행해보아, 이번엔 각 컴포넌트별로 댓글이 삭제되도록 해보았다.

구조

1. 댓글 li 클릭 시 → main 까지 클릭된 클릭된 댓글 comment object 1개와 클릭된 comment 가 포함된 feed obejct를 넘긴다
2. 해당 comment object를 comments object에서 한 줄 삭제한 후, 삭제된 comments 를 전체 database에 업데이트 해준다
   
   
   
   

1. 댓글 1개의 data와, 댓글이 포함되어 있는 feed object넘기기

댓글 data를 넘기는 이유는 댓글을 삭제하기 위해서이다.

feed 를 함께 넘기는 이유는 역시 댓글 추가 기능과 동일하게, 몇번 째 feed 가 추가된 것인지를 확인하기 위함이다.

2. comment object 삭제 후 전체 database 업데이트 하기

handleDelete = (reply, feed) => {
    const commentList = feed.comments.filter(item => item.id !== reply.id);
    const newFeed = { ...feed, comments: commentList };
    const feeds = this.state.feeds.map(item => {
      if (item.id === feed.id) {
        return newFeed;
      }
      return item;
    });
    this.setState({ feeds });
  };

댓글 추가 기능과 다른 것이 있다면, database를 업데이트 하기 전에, filter 를 사용하여 클릭한 댓글을 삭제하도록 하는 것이다.

filter 를 사용하여 comments 내 댓글 을 한 줄 삭제한 뒤, 그 내용을 newFeed 를 사용하여, feed 단위로 반영싴준다.

그 후, 댓글 추가와 동일하게 전체 feeds 를 돌면서 댓글이 추가된 경우 새로 만든 newFeed 가 추가되도록 하였다.

고려할 사항

main 까지 끌고 올라가서, 전체 feed를 건드리는 것이 좋아보이지 않는다.

변경된 부분만 수정될 수 있도록, 각 feed별로 데이터를 받아와서, 그 내부에서 댓글 삭제, 추가 작업이 이뤄질 수 있도록 고민해봐야겠다.