YIL - mock data를 활용하여 article component 각각에 대한 댓글 삭제 기능 구현
지난 피드에서 각 컴포넌트별 댓글 추가 기능을 진행해보아, 이번엔 각 컴포넌트별로 댓글이 삭제되도록 해보았다.
구조
- 댓글
li
클릭 시 → main
까지 클릭된 클릭된 댓글 comment
object 1개와 클릭된 comment
가 포함된 feed
obejct를 넘긴다
- 해당
comment
object를 comments
object에서 한 줄 삭제한 후, 삭제된 comments
를 전체 database에 업데이트 해준다
1. 댓글 1개의 data와, 댓글이 포함되어 있는 feed object넘기기
li
클릭 시 → main
까지 클릭된 클릭된 댓글 comment
object 1개와 클릭된 comment
가 포함된 feed
obejct를 넘긴다comment
object를 comments
object에서 한 줄 삭제한 후, 삭제된 comments
를 전체 database에 업데이트 해준다댓글 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 });
};
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별로 데이터를 받아와서, 그 내부에서 댓글 삭제, 추가 작업이 이뤄질 수 있도록 고민해봐야겠다.
Author And Source
이 문제에 관하여(YIL - mock data를 활용하여 article component 각각에 대한 댓글 삭제 기능 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hjkdw95/YIL-mock-data를-활용하여-article-component-각각에-대한-댓글-삭제-기능-구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)