Lodash의 Debounce를 공부하다가, 정말 어이가 없는 경우가 있어서 하루 종일 무엇이 문제일까 고민하다가,
드디어 원인을 알아냈다!
문제는 이렇다
먼저 내가 어떤 것을 만드려고 했는지 설명하겠다.
현재 만든 것은 이름을 입력하면, axios로 api에서 가져온 이름 데이터 중, Family Name, 즉 성이 같은 이름들을 뽑아내는 것이다.
이럴 때, 검색 창에서 이름을 입력할 때마다 계속 데이터를 요청하면 서버에 과부하를 가져다 줄 수 있다.
예를 들면 김길동을 검색할 때, ㄱ -> 기 -> 김 -> 김ㄱ -> 김기 -> 김길 이런 순으로 나아갈텐데, 이렇게 변화할 때마다,
서버에 계속해서 ㄱ에 맞는 데이터 가져와! 기에 맞는 데이터 가져와! 김에 맞는 데이터 가져와! 김ㄱ에서 김에 맞는 데이터 가져와!
이렇게 계속 요청한다. 이것은 서버에 요청도 문제지만, 렌더링 같은 프론트 쪽에서도 오버헤드가 커지게 된다.
이런 경우를 방지하기 위해 방법을 생각해봤는데,
내가 처음에 생각한 방법은 ,useEffect를 사용하는 방법이었다.
검색어에 입력된 정보를 문자열 변수에 저장한 후, 문자열의 첫번째 값이 바뀔 때만 데이터를 서버에 요청하는 방식이었다.
이 방법도 잘 작동했지만, debounce delay라는 방법이 있고, 실제로 이 방법을 많이 사용한다하여 공부해보았다.
Lodash라는 라이브러리에서 제공하는 함수인데, ㄱ -> 기 -> 김 -> 김ㄱ -> 김기 -> 김길 이렇게 진행되며 요청을 할 때, 계속해서 요청을 보내는 것이 아니라, 값이 바뀔 때는 가만히 있다가, 값이 바뀌지 않을 때 마지막 요청, 마지막 이벤트에 대한 함수의 결과 값만 반환하는 방식이었다.
그래서 debounce delay라는 방식은 값이 바뀌지 않을 때, 이벤트가 더 이상 일어나지 않은 후 얼마 간의 딜레이 후에 작동을 하는 방식이다.
이에 대한 설명은
https://frontcode.tistory.com/60
[REACT] React SyntheticEvent
React SyntheticEvent GetInputData = event => { this.setState({ [event.target.name]: event.target.value }); }; GetInputData(event)} />; ReactJS를 공부하고 여러 프로젝트를 진행해보며 나의 코딩 능력이..
frontcode.tistory.com
이 블로그를 참고해보는 것이 좋을 것 같다. 여기 글에서는 일단 오류 해결을 중점적으로 작성할 예정이다.
그래서 코드를
이렇게 작성했을 때는 매우 잘 작동하였다.
하지만 inputData를 useState를 사용하여 state에 저장하여 코드를 작성하면 이렇게
딜레이가 있긴한데, 일정 딜레이 이후에 9번 변화가 있었다면 9번을 데이터 요청을 주르르륵한다.
아마 원인은 state의 값이 바뀔 때마다 리렌더링 되는데, 이때마다 함수가 새롭게 호출이 되어 문제가 발생하는 것 같다.
실제로 컴포넌트 내에 이런 "하하"라는 로그를 찍어서 확인해보면, state 값이 변경될 때마다 렌더링이 엄청나게 발생하는 것을 볼 수 있다.
그럼 이 문제를 어떻게 해결할 것인가?
state를 사용하지 않는 방법이 있지만, 이것은 근본적인 해결책이 되지 못한다.
그래서
이렇게 setInputData를 debounce Delay 함수에 넣어주면 문제가 해결된다.
하지만 이렇게 되면 비동기적으로 진행되는 JavaScript의 특성상,
fetchData가 먼저 실행되서 InputData가 바뀐 것이 반영되지 않을 수 있다.
이 부분만 고려해주면 문제 끝!!
많이 부족하지만 코드를 올려본다
https://github.com/puba5/MatZipJokBo/blob/master/pages/axiosTest.js
puba5/MatZipJokBo
홍대 맛집족보 페이지. Contribute to puba5/MatZipJokBo development by creating an account on GitHub.
github.com