오늘 새로 배운 것
Throttling and Debouncing
좋아요 계속 연속으로 누렀다고 가정했을 때 누를 때마다 서버에 요청을 하게 되면 서버에 부담을 주게 된다. 마지막 이벤트에서만 서버에 요청을 하도록 하면 서버의 부담을 줄여줄 수 있다.
lodash
JS 유틸리티 함수를 모아놓은 라이브러리
lodash를 통해 쓰로틀링과 디바운싱을 적용할 수 있다.
그리고 리액트에서 쓰로틀링과 디바운싱 시 useCallback을 적용
쓰로틀링에는 세가지 타입이 있음
Leading Edge : 첫번째 이벤트 발생하자마자 함수 호출. 그 이후 delay time 동안은 이벤트 무시
Trailing Edge : 특정 딜레이 시간동안의 이벤트를 무시하다가 딜레이가 끝나기 직전 바로 앞에 있는 마지막 이벤트 발생시 함수 호출
Loading & Trailing Edge : 이벤트 발생하자마자 함수 호출, 딜레이 타임동안 무시, 딜레이 타임 끝나기 직전 이벤트에서 함수 호출
활용 예)
무한스크롤에 쓰로틀링을 주로 적용
Debouncing
스위치 On할 때 바로 On으로 계속 유지되는 것이 아니고 짧은 시간동안 on-off를 매우 짧은 시간동안 반복하는 현상
프로그램 측에서의 디바운싱
특정 시간 동안의 이벤트는 무시하고 마지막 이벤트에 대해서만
활용 예)
입력값 실시간 검색, 화면 resize(화면을 줄였다 넓혔다 변형할 때 화면 사이즈 마지막에 변경할 때만 이벤트에 의해 호출)
Memory Leak
필요하지 않은 메모리를 계속 점유하고 있는 현상
setTimeout은 메모리 누수를 유발하는지?
상황에 따라 다르다.
setTimeout 으로 타이머 동작 중 clearTimeout을 안해주고 페이지 이동 시 컴포넌트가 언마운트 되었음에도 여전히 메모리를 차지함.
리액트에서 state나 props가 변경될 때 리렌더링이 일어나는데 setState가 일어나면 다시 useState 정의한 부분부터 리렌더링이 일어나고 타이머에 대한 정보가 초기화가 되기 때문에 딜레이가 적용이 안됨. 그래서 타이머에 대한 정보를 기억하기 위해 클로져라는 성질을 이용해 다른 스코프에 타이머 정보가 있도록 함으로써 디바운스가 의도한대로 잘 동작하도록 함.
리액트에서 쓰로틀링과 디바운싱을 적용하려면 lodash 라이브러리의 메서드를 이용하고, 또한 input을 입력할 때 입력 이벤트에 대해 호출했던 동일한 handle함수를 호출해야하는데 동일한 함수가 아니면 매번 타이머에 대한 정보가 초기화되어 기억을 못하므로 쓰로틀링과 디바운싱이 적용이 안된다. 그래서 이 함수를 메모이제이션할 수 있는 useCallback 함수를 사용한다.
