목록자바스크립트 검색 구현하기 (1)

미주알고주알

[React.js] 리액트로 검색 filter 및 highlight 기능 구현하기(+ debounce, throttle)

사용자가 검색을 하면, 검색 결과 배열이 `map`으로 출력되는 동시에, 검색 `input`의 값이 포함된 문자열은 파란색으로 표시가 되는 걸 볼 수 있다. 우선 검색 값에 관해선, `input`에 따라 결과 배열을 filter 하는 것으로 `indexOf` 메소드를 활용하면 간편하다. `filter`와 `indexOf`의 조화랄까? const onSearch = useCallback( debounce((e: ChangeEvent) => { setSearches(() => _searches.filter((ret: any) => ret.indexOf(e.target.value) > -1) ) }, 300), [_searches] ) 참고로 여기서 `input`값이 `onChange`될 때마다 실행될 함수인..
Javascript 2023. 3. 28. 01:44
이전 Prev 1 Next 다음