우선 참고 영상으로 유튜버 코지코더의 [영화삭제하기]를 참고하면서 기능을 구현하였다
- 부모 컴포넌트에서 댓글에 맞는 ID값이 무엇인지 확인해야 함수안에서 삭제버튼을 눌렀을때 해당 아이디 값을 가지고 있는 댓글 하나가 삭제되도록 구현이 가능하다
id로는 고유한 값이 들어가도록 Date.now를 주었고 아이디는 고정값으로 할당하였다
content에 들어가는 것은 댓글창에 입력한 값이 들어간다
위의 코드는 아래의 화면처럼 구현이 된다
위에 이미 들어가있는 데이터는 JSON 파일에서 가지고 온 것으로 다른 글에서 설명하도록 하겠다
- 부모컴포넌트에서 댓글 삭제하는 함수를 작성해보자
- 댓글을 삭제하는 함수는 id를 인자로 받아 수행한다
- 댓글이 담겨져있는 setCommentContainer에 filter 메소드를 적용하여
객체에 여러개가 있는데 하나씩 찾으려면 filter 메소드 적용하여 조건에 해당하면 해당 조건을 제외하고 반환하는 함수를 작성하였다
댓글을 감싸는 배열에는 여러개의 객체가 있고 하나하나가 해당 댓글의 정보(id)를 가지고 있을 것이므로 적절한 조건을 적용시키면 원하는 결과를 적용시킬 수 있다
조건은 댓글의 아이디 값이 같지 않다면 해당 아이디를 가진 댓글을 빼고 나머지를 반환해줄 것이다 (결과적으로 그 아이디값을 가지고 있는 댓글은 삭제되고 남은 댓글들만 반환해준다)
filter 메소드 더 알아보기
- 부모 컴포넌트에서 props로 댓글을 삭제하는 기능을 자식 컴포넌트에 보내줄 것이다 (자식컴포넌트에서 함수가 실행이 된다)
- 버튼을 생성해주고 눌렀을 때 실행할 함수를 적어준다
(작성하는 곳은 자식 요소 파일에서 작성한다 -> 부모 컴포넌트에서 해당 기능을 수행할 것을 Props로 받아올 것이다!)
해당 코드 부분을 화면에 보여주었을 때는 위에 나와있듯 쓰레기통 아이콘을 넣어주었고
해당 아이콘을 클릭하였을 때 위치에 맞는 댓글이 삭제가 될 것이다
