[React] HTML 요소의 ID 값으로는 숫자를 사용할 수 없다 🤬

주절주절

댓글 삭제 기능을 구현하기 위해 댓글 컴포넌트의 id 값과 댓글 삭제 버튼의

id 값을 같게 부여하고 filter 함수를 통해 댓글 삭제 기능을 구현하려고 했었다....

그런데 아무리 코드를 수정하고 다시 짜봐도 기능이 제대로 작동하지 않는 것이었다!

그러다 구글링을 통해 찾은 게 HTML 요소는 ID 값으로는 숫자를 사용할 수 없다.는 것이다!

결론....?

일단 제목에도 쓰여있듯이 HTML 요소의 ID 값으로는 숫자를 사용할 수 없다.

HTML의 ID 값은 하나 이상의 문자를 포함해야 하고 숫자로 시작할 수 없기 때문이다.

해결법

  deleteComment = e => {
    const deleteCommentId = Number(e.target.id);
    const result = this.state.comment.filter(
      comment => comment.id !== deleteCommentId
    );
    this.setState({
      comment: result,
    });
  };

typeof 연산자를 통해 데이터 타입을 확인해보니 데이터 타입이 달랐었다.

data에서 받아온 동일한 id 값을 부여해서 당연히 값이 같을 줄 알았는데

id 값으로 숫자를 부여할 수 없어서 그런지 자동으로 string 타입으로 형 변환이 됐었다.

그래서 해당 id 값을 Number() 함수를 통해 숫자로 변환하니 잘 작동하였다!!!