useEffect를 활용한 실시간 검색(디바운스 검색) #5
Description
💡디바운스란?
사용자의 빠른 입력 중복을 막기 위해 일정 시간 입력이 멈출 때만 함수를 실행하는 기법
디바운스를 사용해서 과도한 api 호출을 방지하고 실시간으로 검색을 할 수 있게 한다.
- 위 코드는 input이 실행될 때마다 실행된다.
- 300ms를 기다렸다가 안이 함수를 실행한다.(디바운스)
- 앞 뒤 공백 제거한 새로운 문자열 생성
- 만약 공백이 아닌 실제 값이 있다면 입력된 검색어로 api를 호출해서 보여준다.
- 근데 만약 검색어를 다 지우면 전체 InfoCard 리스트를 보여주도록 함
⏰ clearTimeout
사용자가 빠르게 검색하면 여러개의 타이머가 생겨버림 그래서 clearTimeout을 사용한다.
return () => clearTimeout(timer); : useEffect에서 타이머 중복 되지 않도록 정리해줌 즉 이전에 만든 타이머를 지운다.