Debounce란?
debounce function은 사용자가 미리 결정한 시간 동안 타이핑을 멈출 때 까지 keyup이벤트의 처리를 지연시킵니다. debounce처리를 해주면 UI 코드가 모든 이벤트를 처리할 필요가 없고, 서버로 전송되는 API 호출 수도 크게 줄어듭니다. 입력된 모든 문자를 처리하면 성능이 저하되고 백엔드에 불필요한 로드가 추가될 수 있습니다.
작업중인 search input에 검색어를 입력할 시 값이 변경될 때마다 새로이 event가 발생하고 있다.
커스텀훅 만들기
useDebounce를 커스텀 훅을 만들어 주기 위해 src > hooks > useDebounce.jsx 파일을 새로 만들어준다
검색어를 입력한 후 delay로 지정해두는 시간동안 기다렸다가 값이 등록된다.
값이 입력되고 delat값이 끝나기 전 새로 값이 입력되게 된다면, crearTimeout을 통해 handler의 값을 초기화 시켜준다.
만들어둔 커스텀훅을 searchPage에 import해서 적용시키기
searchPage에서, 기존에는 query 값을 통해 입력되는데로 값을 불러오는 searchTerm을 활용해 데이터들을 뿌려주었는데, searchTerm을 다시 useDebounce의 value값으로 넣어주고, 500의 delay 시간을 넣어주었다.
useEffect에서 fetchSearchMovie를 통해 값을 불러올 때 입력되는 값 또한 searchTerm에서 debounceSearchTerm으로 교체해주었다.
다시 웹사이트에 들어가서 검색창에 검색어를 입력해보면 단어 하나하나마다 값이 새로 처리되던 문제가 해결된것을 확인할 수 있다.
