custom attribute는 string이다

  this.setEvent = () => {
    this.$element.addEventListener('click', (e) => {
      const $li = e.target.closest('li');

      if (!$li) {
        throw new Error('해당 투두가 존재하지 않습니다.');
      }
      if (e.target.classList.contains('deleteBtn')) {
        const filtered = this.state.filter((todo, i) => {
          return i !== parseInt($li.dataset.id);
        });
        this.setState(filtered);
      } else if (e.target.tagName === 'S' || e.target.tagName === 'LI') {
        const nextState = [...this.state];
        nextState[$li.dataset.id].isCompleted =
          !nextState[$li.dataset.id].isCompleted;
        this.setState(nextState);
      }
    });
  };

해당 코드에서 parseInt($li.dataset.id)로 적은 이유는 data-id와 같은 커스텀 어트리뷰트는 string 타입이기 때문에 숫자로 변환해서 비교해야한다. ===은 타입까지 비교하기 때문이다.

이거 때문에 몇 분동안 삽질을 해서 잊지 않기위해 메모해둔다.