리액트나 자바스크립트가 아니더라도, 데이터를 사용하게 되면 필연적으로 필요한 데이터와 필요 없는 데이터를 걸러야 할 일이 생긴다.

모든 데이터를 다 로드해도, 거기서 필요한 데이터만을 추리기도 하고, 100중에 1이 필요하다고 100을 다 로드 할 수 도 없는 노릇이니 말이다.

아마 array에 대한 포스팅에서도 한번 있었다고 생각하지만, 다시한번 점검한다는 생각으로 Array.filter()에 대해 다뤄보려고 한다.

Array.filter()

MDN을 먼저 확인해보자.

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

filter라는 말 처럼 하나의 컨디션을 걸고, 거기에 통과하는것들로만 모아서 새로운 배열을 만드는 메서드이다.

보통 이 filter는 자바스크립트에서도 많이 사용 되지만, 리액트에서도 자주 사용된다.

최근 풀었던 문제중에는 이 filter를 응용한 문제도 있었다.

어떤 기능이었나?

예를 들면, 받은 데이터를 state에 저장하고, 만약 어떠한 값이 바뀌었다면, 그 값에 맞춰서 통과하는것만 표시하는 기능이다.

그렇다. 바로 검색기능이다.

여태까지 filter에 관한 기능은 몇번 구현 했었기에, 해당 메서드를 구성하는것 자체는 어렵지 않았지만, 문제는 타이밍이었다.

내가 생각했던 타이밍은 크게 나눠서, 처음 데이터가 fetch 되고 state에 저장 된 다음, 키 입력이 발생 했을때에 맞춰서 컨디션에 맞는 데이터가 입력 되게 하였으나,

키 입력이 발생하고 setState가 비동기로 처리 되는터라 타이밍을 맞추지 못하였다.
리턴문 안에서 사용했을때도 마찬가지로 잘 되지 않았고, 구글링등으로 찾아낸 해법은 바로,
render함수 안에 변수를 선언해서, 그 변수에 filter로 거른 데이터를 담은 다음, state가 아닌, 그 변수를 기준으로 컴포넌트가 렌더링 되게 만드는 방법이었다.

setState의 영향도 받지 않아서 반응도 훨씬 빠른 느낌이었다.

다만 걸리는것은, 구글링을 하다가 비슷한 내용의 소스코드를 봐버렸기에, 혼자 해결한 느낌이 들지 않는다는것이었다.

그리고, 과연 내가 혼자 생각했을때, 이 발상이 생각 났을까 하는 생각도 들었다.
해결 된것은 좋지만 내 힘으로 푼게 아닌것 같아서 풀고 나서도 기분이 미묘한 문제였다.