TIL-간단한 debounce

1.내가 만난 문제

현재 사용비밀번호를 onchange를  실시간으로 값을 받으면서 현재비밀번호와 입력값이 일치한지 확인하는 함수를 실행시켜줘야했다.

근데 onchange될때마다 함수를 실행하기에는 너무 비효율적이므로 debounce를 사용하기로했다.

 

2.시도

lodash에서 debounce를 사용했다.

debounce를 사용한 이유!

: 사용자가 입력하고나서 일정시간 이후에 함수를 실행할 수 있도록 구조를 짜는게 효율적이였다.

 입력이 끝나고 나서 0.3초 이후 입력값의 전체를 들고 함수를 한번 실행시킨다.

import { debounce } from "lodash";  

const debounceFunc = debounce(onChangePassword, 300);
//onChagePassword함수를 마지막 입력값이후 0.3초 이후에 실행

 

3.해결

onchange될때마다 실행되었던 함수가 1번만 호출되는것을 콘솔을 통해 확인할 수 있었다.

확실히 부담도 덜하고 효율적인것같다.

** 밑의 사진을 보면 알 수 있다

4.알게된 점

debounce에 대해서 완벽하진 않지만 사용하기 위해서 구글링을 열심히 하면서 어느정도 알게됬지만,

(내가 사용한 방법 말고도 다양한 방법이 있었다. useCallback을 같이 사용하는 코드들이 많이 보였지만 나는 간단하게  사용을 했다

다양하게 사용할 수 있는 방법들도 공부해보면서 최적화에 대해 알아보면 좋을 것 같다.)

throttling에 대해서도 공부 해보고 어느곳에다가 사용하면 좋을지, 또는 수치화로 확인을 해보고 싶다.(아직 수치화로 본다는게 어렵다)

**debounce도 사용하는 곳에 따라서 좀 더 효율적으로 사용할 수 있는게 무엇인지 알아보면 좋을것같다.

 

---

왼쪽: debounce처리 , 오른쪽 : onChange로 바로 실행(오류는 내가 비밀번호를 틀렸다;;)

최적화 전.mov

0.98MB

최적화.mov

0.57MB

위의 동영상은 최적화 후 렌더링 모습