Throttling & Debouncing
짧은 시간 간격으로 연속으로 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 !
JS -> setTimeout
이벤트는 많이 일어나지만 함수는 한번씩만 호출되는거 볼 수 있음
Throttling : 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것!
Debouncing : 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간이 경과한 후에 한 번만 호출하도록 하는 것.
예를 들어 브라우저 창을 줄였다가 늘렸다가 엄청나게 반복하고 있다면, 그걸 서버에 요청해야 하는 상황이라면 엄청난 부하가 일어날거지 ? 브라우저 창 놓으면 몇 초 뒤에 마지막 상태만 반환하는 거!
쓰로틀링 디바운싱 할 때는 항상 기준 시간이 필요함.
셋타임아웃에 대해서 변수 선언 후 콘솔로 확인 하면, 변수에 대한 숫자가 반환됨 그걸 아이디라고 함.
// debouncing : 버튼 클릭이 끝난 후 2초 후에 로직 실행( 몇 번이 눌리든 상관 없이 끝나고 실행)
// Throttling : 2초 후에 로직 한 번만 실행
1.근데 만약 state (기본 : false) 하나 있다고 치고 , setState(!state)라는 로직을 쓰로틀이든 어디든 넣어놓으면
그 자체로 리랜더링 되어야 하기 때문에 셋타임아웃 함수가 정상 동작 하지 않음.
2.네비게이트 처리하고 스로틀링 버튼 누른 다음에 페이지 이동하면 다른 페이지 가서 스로틀 요청한게 나옴.
메모리 누수임
이런 식으로 페이지 언마운트 시 타임아웃 함수 없애달라는 로직 추가 하면 됨.
lodash 라이브러리 알아보기~!
yarn add lodash
_. 낮은 대쉬로 쓴다 라고 기억하면 됨.
import _ from ‘lodash’
useCallback으로 감싸서 함수를 메모이제이션 해야 정상적으로 잘 출력되고 있다.
왤까효
모르겠음 사실.. 무슨 말인지 ㅠ
debounce나 throttling 쓸 때는 useCallback으로 감싸줘서 함수 자체를 메모이제이션 하면
리렌더링이 발생하더라도 기능이 정상적으로 동작하게 할 수 있다. 라는 말은 대충 이해가 가는데,,, 조금 더 찾아봐야겠다.
