나만의 훅을 만들어 Debouncing 구현하기

일단 마지막 디바운싱 톺아보기 작성에 앞서, 내가 이렇게 20일만에 글을 들고 온 이유변명를 설명하고자 한다. 일단, 너무 기쁜 소식은, 내가 약 6개월 간의 취준 생활을 청산하고 카카오 2021 하계 인턴십에 참여하게 되었다. 나를 뽑아주신 두 분의 면접관님께 다시금 보시진 못하시겠지만 감사의 말씀을 전하고자 한다. 될 줄 몰랐는데 뽑아주셨고, 두 달간 정말 열심히 해서 또 이 좋은 기회를 나의 밑거름 삼아 더욱 더 성장하는 개발자가 되고 싶다. 🙇‍♂️🙏💙

인턴십을 앞두고 지난 4월부터 진행하고 있던 여행 블로그 개인 프로젝트가 거의 마무리 단계에 있기 때문에 인턴십 전에 최대한 마무리 하려고 2주 내내 사이드 프로젝트에 매달렸기 때문에 또 글을 작성할 시간이 없었다고,,한다면 너무 변명이려나? 여튼 그 사이드 프로젝트도 우여곡절이 정말 많았기 때문에 따로 글을 작성하여 내가 배운 점, 프로젝트를 진행하면서 발생했던 이슈, 어려웠던 점, 극복한 방법 등을 공유하는 시간을 갖고, 오늘은 그 프로젝트 안에 그래서 어떻게 디바운싱을 적용했는지, 디바운싱에 좀 더 포커스를 맞춰 이야기 하고자 한다.

✨ useDebounce.js

디바운싱을 적용한 부분은 메인과 my blog 화면 내에 있는 해시태그 부분이다. 해시태그를 누르면 해당 해시태그를 포함하고 있는 포스팅 게시물만 필터링 해서 노출하는데, 0.5s의 시간 동안 버튼이 눌리면 timer가 생성되었다가 지워지고 마지막 액션만 살아남아 해당 해시태그로 필터링 작업을 하게 된다.

기존에 클로저로 단순히 함수를 만들어 호출하면 delay 시간 내에 추가 액션이 발생하더라도 이전에 호출된 타이머가 남아있지 않고 계속 새로운 타이머가 생성되어 debounce가 전혀 되지 않는 문제점이 있다고 말했는데, 그 이유에 대해 곰곰이 생각해보니 내가 단순히 호출해서 함수를 부르면 그 함수는 전역에서 사용되는 함수가 아니기 떄문에 당연히 해당 함수 내에 클로저를 만들고 비공개 함수를 사용하더라도 그걸 호출하는 다른 컴포넌트에서는 같은 모듈 내에서 불리는 함수가 아니므로 timer의 이전 값을 기억하지 못하고 초기화 되어 작동하는 것이라고 이해하게 되었다. (아마 둘은 다른 스코프 체인을 갖고 있기 때문이 아닐까?) 그래서 debounce를 호출하는 해당 컴포넌트 에서 timer id로 사용할 lastcall이라는 변수를 만들어 useState()로 상태를 관리하고 useDebounce 에서는 timer에 넘겨지는 lastcall이 변경될 때마다 기존의 타이머를 지우고 새로운 timer를 생성해 delay 시간 내 마지막으로 생성된 timer가 작동할 수 있도록 코드를 작성했다.

물론, 기존의 클로저를 활용한 디바운싱은 아니며, useDebounce가 불릴 때마다 내부적으로 timer는 lastcall로 초기화 되겠지만, 다른 debounce가 호출 되면 기존의 debounce는 timer를 clearSetTime으로 삭제하기 때문에 결국 가장 마지막 액션만 setTimeout() 내 콜백 함수로 전달 돼 실행되게 된다.

즉, react의 라이프사이클을 활용한 debounce라고 할 수 있다.

이로써, 디바운싱을 잘 작동되며 공부한 것을 프로젝트에 녹여냈다는 것이 매우 뿌듯하다.

요즘에, 회사 내 멘토님이 선물해주신 ‘프레임워크 없는 프론트엔드 개발’이라는 책을 읽고 있는데 이 책을 읽으면서 내가 배운 것들을 정리해 보는 시간을 가져도 좋을 것 같다.

fin.