커리어/Sendy
[FE] 디바운싱 기법을 적용하여 성능 개선 with 커스텀 훅
배경 센디 인턴 첫 파일럿 프로젝트를 구현할 당시, 디바운싱 기법을 사용한 것에 대해 적어보고자 한다. 센디의 "용달 비용계산기"는 상차지에서 하차지로 가는 데에 드는 비용을 알려주는 서비스이므로, "주소지"를 사용자에게서 입력받아야 했다. 이때, 주소지를 입력받는 input 태그 아래에 [입력값과 연관된 제시어들]을 서버에서 가져와서 보여주어야 했다. 처음에는 단순하게 input의 value를 useState로 선언하고, state가 바뀔 때마다 api 요청을 날려서 데이터를 가져왔다. 이 상태로 구현해서 사수분에게 코드 리뷰를 받았는데, "state가 바뀔 때마다 요청을 날리면 자원 낭비일 수 있다. 디바운싱 기법에 대해 검색해봐라."고 해주셔서 디바운싱에 대해 알게 되었다. 디바운싱이란? 디바운싱에..
