useDebounce 훅 적용기

먼저 기존에는 입력 컴포넌트를 만들고 Props를 주입해서 사용하고 있었다.

키워드를 통해 검색 결과를 검색하는 기능을 구현하기 위해 위에서 정의한 컴포넌트를 사용했지만 , 

입력할때마다 상태가 바뀌는 불편함이 존재하였다!

입력할떄마다 상태가 바뀌는 불편함이 존재한다.

입력한 상태가 바뀔떄마다 입력값을 통해 검색 결과를 가져오기 떄문에 너무 과도하게 검색 결과가 바꾸는 문제도 발생했다.

입력을 할때마다 굉장히 불필요하고 많은 검색 결과를 찾고 있었고, 개선이 필요했다. 

---

디바운스

이를 해결하기 위해 디바운스를 이용할 수 있다. 다바운스는 짧은 시간 간격으로 연속해서 발생하는 이벤트를 묶어, 과도한 이벤트의 호출을 방지하는 기법이다.

 

위의 경우 텍스트 입력 필드에 값을 입력할 떄마다 연속해서 검색 결과를 찾게 되는데, 사용자가 입력을 모두 끝냈을 떄 한번만 검색 결과를 찾는게 더 바람직하다.

 

사용자가 입력을 모두 끝냈다는 것은 정확하게 알 수 없어서, 일정 시간 동안 입력 필드에 변화가 없다면, 입력이 완료한 것으로 본다. 이 디바운스를 커스텀 훅으로 분리해서 정의할 수 있다.

 

어떤 타입의 value를 받을 지 모르기 떄문에 제네릭 타입을 사용하였고, 처음 상태를 정의해주었다.

delay값이 정의되지 않은 경우 기본값으로 0.8초를 설정해주었고, useEffect 훅으로, value나 delay가 바뀔때마다 타이머를 설정한다.

useEffect 내부에서 return문을 작성한다면, 컴포넌트가 제거될 떄 해당 코드들이 실행된다.

컴포넌트가 제거될 떄 clearTimeout을 활용해서 타이머를 초기화 해주었다.

 

delay 시간 내에 다른 이벤트가 발생하지 않으면 value값이 변하지 않으므로 useEffect훅이 다시 실행되지 않는다.

따라서 그대로 기존의 상태(state)를 바로 반환하게 된다.

 

만약 delpay 시간 내에 다른 이벤트가 발생하면 setState함수가 여러번 실행되면서 결국 마지막 상태값만 적용된다.

결과적으로 새로운 이벤트가 발생하면, 기존 설정된 타이머가 초기화되고, 새로운 타이머가 설정된다!

---

그 후 이 커스텀 훅을 컴포넌트에 적용하였다.

 

확실히 전보다 검색 결과를 호출하는 빈도수가 많이 준 것을 확인할 수 있었다.

콘솔에 찍히는 수가 거의 반 정도 줄어든 모습이다!.!