전에 진행했던 프로젝트의 단점을 돌아보며 다시 공부하면서 쓰는 글
쇼핑몰 클린 코딩을 할 때 검색 기능으로 궁금해진 점
사용자가 입력할 때의 입력값으로 useEffect를 통해서 API 요청을 보내면, 타자를 빠르게 쳐도 그걸 하나하나 다 API 요청이 된다는 건가?
= 낭비 같다
이를 방지하기 위해 Debouncing이라는 기법 찾았다
디바운싱이란 이벤트가 많이 발생해도 마지막 이벤트를 기점으로 일정 시간이 지나고 난 뒤 요청을 1번만 발생시키는 기법이라고 한다!
(그니까 일정 시간을 정해두고 그 시간 안에 빨리 일어난 일들은 모두 이벤트를 발생시키지 않는다는 거지)
이 일정 시간은 정해주는 건 간단하다!
setTimeout 그리고 잊지말고 clearTimeout을 써주면 되는 거다.
이렇게 함수 안에서 이전의 timeout이 남아있다면 clear 먼저 해주고, setTimeout을 해주는 거다
여기서 내가 setTimeout은 2초 뒤에 "log in 2 seconds"가 콘솔에 찍히도록 해놨으니, 어떤 이벤트가 일어났을 때 이 함수를 호출하면 2초 뒤 저 문구가 콘솔에 찍히는 것이다.
자, 그럼 검색창에는 이걸 어떻게 할 것인가.
useEffect를 활용해서 debouncedInputValue이라는 상태에 inputValue에 변화가 일어날 때마다 일정 시간을 정해준 뒤 set을 시켜주는 거다
그리고 API 요청은 debouncedInutValue가 변할 때마다 시켜주는 거지
이렇게하면 일정 시간이 지나서 빨리 일어난 이벤트 중 가장 마지막의 이벤트에 대한 요청을 서버에다가 보내는 것이다.
이로 인해, 비용적으로 굉장히 절감이 될 거 같다는 생각을 하게 됐다
그럼 여기서 나타나는 Throttling
디바운싱이 나온다면 throttling도 같이 나오는 짝꿍이다
그렇다면 쓰로틀링이란 뭘까?
일정 시간 안에 실행된 이벤트를 한번 더 실행하지 않도록 제어하는 기법이라고 한다.
쓰로틀링은 주로 연속된 이벤트 특히 스크롤 이벤트에 많이 적용을 한다고 한다.
무한 스크롤링을 만들어놨을 때, 스크롤을 미친듯이 빠르게 내린다고 하면 그에 대한 요청을 계속계속 한다는 건데, 그 사이에 다시 빠르게 스크롤을 올라온다면?
난리가 나겠죠 아주 그냥
그래서, 한번 이벤트가 발생하고 지정한 시간 후에 다음 이벤트가 발생할 수 있도록 컨트롤을 하는 기법이라고 보면 될 것 같다.
쓰로틀링은 그래서 어떻게 구현하는 걸까?
얘는 호출시킬 함수와 addEventListner, 그리고 setTimeout만 있으면 된다.
한번 코드를 보자
여기서 scrollHandler는 화면에 스크롤이 일어나면 쓸 함수인데
timer를 null로 없애주고 scroll happpened가 로그에 찍히도록 했다.
그래서, scroll 이벤트가 일어났을 때 timer가 없으면! timer는 setTimeout로 지정해주고 2초 후에 timer를 없애주고, scroll happened가 로그에 찍히는 거죠
그니까, 여기서는 이벤트가 일어나는 즉시 그 이벤트를 핸들하는 함수를 바로 처리하지 않고 일정 시간을 정해준 뒤 그 시간이 지난 후에야 이벤트 처리 함수가 발생하도록 하는 것이다.
여기서 setTimeout 안의 함수가 왜 timer=null을 하냐면, time=null을 해줘야 다음 호출이 가능하도록 만든다고 하는 것이라 한다.
이건 타이머를 초기화 해주는 것이라고 한다! 그래서 스크롤이 일어날 때마다 정해진 시간 뒤에 타이머를 초기화 해주고, 다음 이벤트가 일어났을 때 타이머가 초기화 되어 있다면 setTimeout을 하고 이벤트를 처리한 후 또 타이머를 초기화해주는 것이다!
조금은 헷갈리지만? 왜 다들 이 둘을 헷갈려 하는지 알게 됐다
이걸 이번 프로젝트에 적용해보면서, 실질적으로 보는 수밖에ㅔ!
적용하고 나면 그땐 그 기술 블로그를 쓰겠다 :)
