프리온보딩 #1 - 선별과제 리팩토링 - 댓글 삭제 구현

---

1. comment에 id 부여하기

• 상지님 방법 참고
  https://github.com/saanglee/wanted_pre_onboarding_fe/blob/main/src/components/Feed/Feed.jsx

comment 각각에 commentId를 부여해주고 Id값이 1씩 증가하도록 설정해주었다. 상지님은 useRef 사용하셨는데 나는 아무리해도 뭐가 하나씩 문제가 생겨서 useState사용했다.
밑에 5. 1번 문제 해결 과정 부분에 해결과정이 자세히 나와있다.

2. feedData에 id 추가하기

map 돌릴 때 key가 index로 되어있어서 수정하다보니 에러가 떴다.
key 값을 index로 주게되면 삭제 후에 인덱스가 새로 변경되어서 삭제가 완벽하게 되지 않을 수도 있으므로 map을 돌릴 때는 key값을 index로 주는 것은 지양해야한다.

그래서 feedData에 commentId를 넣어주었다.

3. 버튼에 id값 주기

여기서 나의 실수가 하나 더 나오게 된다. 댓글 삭제를 실제로 해보니 원하는 댓글이 아닌 다른 댓글이 삭제되는 이상한 현상이 발생했다. button에 id를 index로 주지 않고 commentId로 줘서 생긴 문제였다. 막상 index가 필요한 곳에는 index가 아닌 다른 값을 주어서 버그가 생긴 것이다. 삭제 버튼을 누르고 나서 다시 인덱스가 리셋되어야 누른 인덱스부터 한 개만 삭제되는데 이전에는 id를 index가 아닌 다른 값을 줬더니 이상하게 작동했던 것이다.
어쨌든 해결 완료 !!!

4. splice 메서드 사용해서 삭제된 후 나머지 댓글 구현하기

filter를 사용하고 싶었는데 안되서 splice 를 썼다...
splice 메서드를 사용해서 삭제한 댓글 제외한 나머지 댓글들을 구현했다.

  const deleteComment = event => {
    props.comments.splice(Number(event.target.id), 1);
    props.setComments([...props.comments]);
  };

---

5. 1번 문제 해결 과정

5-1 이렇게 하니까 댓글이 두개가 달림.

const commentId = useRef(0);


    const newComment = {
      id: commentId.current,
    };
    commentId.current += 1;

    props.setComments([
      ...props.comments,
      {
        user: localStorage.getItem('user'),
        content: comments,
        id: commentId.current,
      },
      (commentId.current += 1),
    ]);
    

5-2 댓글이 두개가 생기지는 않는데 id가 undefined.

5-3 문제해결!!!

알고보니 useRef를 안쓰는데 id에 current를 사용하고 있었따...;;

해결한 코드

1. useState 사용 
2. commentId: commentId 로 id 추가
3. setState로 id 값을 1씩 증가

결과물