Lodash debounce로 컴포넌트 성능 향상 및 UX제공

Lodash debounce로 컴포넌트 성능 향상 및 UX제공

Lodash 로 컴포넌트 성능 향상 및 UX제공

회원가입 구현 중 좀 더 나은 UX를 제공하고 싶었습니다.

기존 옛날 웹사이트는 아이디를 입력하고 옆에 중복체크 버튼을 눌러 확인하였습니다.

네이버 양식입니다. 입력값을 입력할 때 즉 onchange 이벤트가 발생할 때 마다 체크합니다.

하지만 실제 서비스에서 입력할 때 마다 서버랑 통신해 체크하는 것은 많은 비효율적일 것입니다.

이를 해결하기 위해선 사용자가 입력 후 특정 시간 경과해야 서버에 요청하도록 하면 됩니다.

이를 도와주는 라이브러리 lodash가 있습니다 (기분 굿)

debounce

이벤트 반복 실행 시 콜백 함수의 불필요한 호출을 줄여주고 서버와 통신도 줄여줌으로서 성능향상에 도움을 준다.

debounce(callback, [wait=0], [option={}])

debounce는 이벤트가 끝나고 wait설정한 값이 지나야 콜백함수가 실행된다.

throttle 는 setinterval 처럼 일정 주기 내에 실행된다.

출저 : https://velog.io/@edie_ko/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%B1%EB%8A%A5-%ED%96%A5%EC%83%81-%EC%8B%9C%ED%82%A4%EA%B8%B0-feat.-Lodash-throttle-debounce

다수의 이벤트들을 하나로 처리한다.

기존의 있던 나의 토이프로젝트에서 onChange 이벤트에서 쿼리를 날릴 때 로그를 간단히 찍어보았다.

입력 하나하나마다 서버랑 통신하는 것을 볼 수 있다. 이제 debounce를 적용해보자.

const debounceIDinputCheck = debounce((value: string) => { console.log(`${value}`); }, 450); const SignUp = (props: RouteProps) => { const [inputs, setInputs] = useState({ id: '', email: '', pwd: '', chkpwd: '' }); const onChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); if (name === 'id'){ debounceIDinputCheck(value); } } // ..... more

debounce함수로 감싸주어 onChange 이벤트가 발생할 때 실행되는 콜백함수에서 호출해주었다.

detest 라는 6글자를 입력했지만 6번 실행하지 않는다. 실제 서비스였다면 6번이나 불필요한 네트워크 통신을 하지 않게 되므로 성능 향상을 기대해 볼 수 있다.

from http://wakanda-developer.tistory.com/14 by ccl(A) rewrite - 2021-09-20 22:26:47