querySelectorAll로 filter 메서드 사용하기

리액트에서 테스트 코드를 작성하다가 알게 된 방법으로 엄청 기초인데 몰랐던 것을 반성하며 잊지 않기 위해 글을 작성한다.

querySelectorAll라는 Document 메소드는 NodeList를 반환하는데 Array타입이 아니라 filter, reduce와 같은 Array 타입의 메소드를 사용할 수 없다.
따라서 NodeList를 Array.from()를 사용해 Array로 변환하여 사용하면 된다.

Array.from()

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕은 복사로 진짜 array 생성해준다.

const arr = Array.from(container.querySelectorAll('[text-anchor="start"]'));
const res = arr.filter(e => !isNaN(Number(e.innerHTML)));