아.. 분명 출간하기를 눌렀는데 다 날라갔다.. 이럴 수 있나..?ㅎ....
다시 쓰는 TIL🤣
디바운싱과 쓰로틀링 개념 익히고 구현해보기
📌검색어 추천이 있는 검색창 만들기
새로운 기업과제가 시작되었다..!
공공기관 API를 가지고 검색창을 만드는 과제이다.
이 과제의 핵심 포인트는 API호출 최적화인것 같다
API 호출 최적화
- 호출별로 로컬 캐싱 구현하기
- 입력 마다 호출 하지 않고 자신만의 전략으로 API호출 횟수를 줄일 것
예를 들어 검색창에 검색어를 입력할 때마다 등 컴포넌트가 리랜덩링될 때 계속 API가 호출이 된다면 아주 비효율적으로 네트워크 리소스가 낭비될 것이다.
이러한 문제들을 최소화하며 방지하기 위해서는 쓰로틀링과 디바운싱이 개념이 있다.
1. Throttling (쓰로틀링)
- 이벤트가 발생하고 나서 일정 주기가 지나기 전에 다시 호출하지 않도록 하는 것
- 주로 무한 스크롤에서 사용한다.
2. debounce(디바운싱)
- 연이은 이벤트 중에 마지막으로 호출된 이벤트만 호출하도록 하는 것
- 주로 검색어를 입력 시 API요청으로 관련 데이터를 보여주고자 할 때 등 사용한다.
lodash, underscore에서 제공되는 debounce 나 나만의 디바운싱 함수를 만들어서 사용할 수 있다.
먼저 나만의 debounce함수를 만들어서 적용시켜보았다.
1. debounce를 하지 않았다면?
예를 들어 아래와 같은 코드에서 내가 velog라는 단어를 입력했다고 하자.
...
const handleSearchChange = (e) => {
setSearch(e.currentTarget.value)
console.log(e.currentTarget.value)
}
...
<input
type='text'
className={styles.inputBox}
placeholder='질환명을 입력해 주세요.'
onChange={handleSearchChange}
/>이렇게 되어 있는 코드에서 api를 호출한다고 했을 때 아래 사진과 같이 검색어를 입력할 때마다 api가 호출되므로 성능적으로 좋지 않게 될 수 있다! => ❌ 비효율적!!
2. debounce를 했다면?
const debounce = (callback, delay) => {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => callback(...args), delay)
}
}
const printValue = useCallback(
debounce((value) => console.log(value), 1000),
[]
)
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
printValue(e.currentTarget.value)
}
...
<input
type='text'
className={styles.inputBox}
placeholder='질환명을 입력해 주세요.'
onChange={handleSearchChange}
/>위와 같이 검색어를 입력했을 때 값이 변화해도 onChange할 때 발생하는 이벤트 함수를 debounce함수로 한번 더 감싸주게 되면 아래와 같이 한번만 불러오는 것을 확인할 수 있다. => ⭕효율적
마무리..
오늘은 디바운싱과 쓰로틀링으로 api를 최적화 하는 것에 대해 공부를 하였다. 내일은 redux와 useQuery에 대해 더 공부를 하고, 기업과제에 쓰일 디바운싱 구조를 잡아봐야겠다.
어제부터 몸이 안좋더니 오늘도 계속 안좋아서 공부에 집중을 많이 하지 못했다..😥 내일은 괜찮아야 할텐데.. 그 와중에 블로그 글도 날라가서 다시 썼다..흑..
여튼 내일도 화이팅이다..!🔥
