왜 필요할까요?🙄
useDebounce를 적용하기전의 코드이다.
input에 onChange함수에 setSearch를 걸어두어서, 사용자가 input에 한글자씩 입력할때마다 search의 state가 변하면, 계속해서 loadUsers()가 실행되어 users가 변한다.
예를들어 john을 입력할때, j o h n 총 4번의 useEffect가 구현되는건데, 이는 넘 비효율적이다. 우리는 그저 john 을 입력할때 나오는 결과값을 원하는거니까!
setTimeOut(타이머)를 적용해서 1초(또는 0.5초) 동안 키보드 입력이 멈췄을 때만
값을 불러오고싶다.
useDebounce
https://stackblitz-starters-978l3b.stackblitz.io
위의 gif을 보면, 사용자가 abc를 입력하고 1초동안 키보드입력을 하지않으면, Debounced value에 값이 abc로 생성되는걸 볼 수 있다.
그리고 사용자가 a b c 이렇게 글자를 입력하면, 클린업이 출력된다.
클린업 함수
clean-up 함수는 의존성 배열에 있는 값들이 변경될 때마다 실행되는데, 이는 컴포넌트가 리렌더링되기 바로 전, 즉 업데이트되기 전에 해당 클린업 함수가 실행된다.
컴포넌트가 언마운트 되거나 업데이트 되기 직전에 어떤 작업을 수행하고 싶다면, clean-up 함수를 사용하자!
즉, 위에 코드에선 value나 delay가 변경될 때마다 먼저 클린업 함수가 실행되니까 클린업이 출력되고, timer가 취소된다.
이렇게 클린업 함수가 실행되고나면, useEffect의 사이드 이펙트 부분(timer함수) 실행.
이렇게 함으로써 이전에 설정된 타이머가 제거되고 새로운 타이머가 설정되는 것
만약 1초가 끝나기 전에 유저가 또 입력을 하면, 클린업함수가 발동하고 타이머는 초기화됩니다.
적용2
요걸 다시 debounce로 적용하면,
우선 useDebounce훅을 위와 같이 설정한다.
그리고 메인 컴포넌트에서, debouncedSearch가 변할때만 loadUsers함수를 실행시키도록~
참고
https://velog.io/@effypark/useEffect-feat.-clean-up#%EA%B7%B8%EB%9E%98%EC%84%9C-clean-up-%ED%95%A8%EC%88%98%EB%8A%94-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B3%A0-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%82%98
https://eun-jee.com/post/front-end/debounce_and_throttle/
https://arnopark.tistory.com/770
