스파르타 코딩클럽 React 리액트 심화반 3주차 정리 lodash, debounce, throttle, useCallback

lodash

- 자바스크릅트 유틸리티 라이브러리

- 배열관리, 모듈화 성능향향 등등

- debounce와 throttle을 제공

 

debounce & throttle

- 둘 다 콜백을 줄여주기위한 용도

 

debounce 

이벤트 요청을 받으면 잠시 기다렸다가 요청을 실행하는데, 실행전에 새로운 요청이 들어오면 이전 요청을 수행하지않고 또 기다렸다가 가장 마지막에 들어온 요청을 수행한다.

 

throttle

일정시간동안 요청 들어온 이벤트의 가장 마지막인 이벤트를 수행한다.

 

 

useCallback(x, [y]);

- 함수를 저장한다.

- 컴포넌트가 리랜더링 되어도 일정 조건 아래에 함수가 초기화되지 않는다.

- x 는 저장할 함수, y가 변하면 함수가 재선언된다.

 

 

예시)

 

> 1000은 밀리초를 의미하며 저 부분으로 몇초후 실행할지 설정할 수 있다.

> input 텍스트타입에 텍스트를 치면 debounce는 텍스트 입력을 멈춘 1초 뒤에 콘솔에 값을 찍어주고,

throttle은 1초마다 값을 찍어준다. 

> debounc와 throttle은 값이 변할때마다 초기화될 필요가 없으니 useCallback에 넣어준다.

(적으면서 이게 맞나 헷갈린다..! useCallback을 잘 안쓰는데 더 알아볼 필요가 있다.)

 

텍스트 입력할때의 콘솔창 출력 예시.

입력을 주저하지않고 한번에 했을때의 모습이다.

throttle은 1초마다 실행하기에 저렇게 나오는거고

debounce는 1초안에 새로운 입력이 들어왔으니 문장이 끝나고 1초 후에야 실행!

 

그래서 throttle은 어느정도 상시로 실행되어야할때 사용하고

debounce는 검색창처럼 사용자의 행동의 끝을 기다려도 좋을 때 사용하면 된다.

 

 

3주차는 실습 위주였기에.. 실습때 메모한건 죄다 주석으로 되어있고 개념만 노트필기를 했으니

적을만한게 이거밖에 없다. 힝.