API 호출 최적화
검색 기능을 구현했을 때 Input 컴포넌트에 입력마다 호출이 많이 일어나기 때문에 API 호출 최적화를 적용하려고 합니다.
호출의 최적화 방법으로는 3가지 정도 생각을 했습니다.
1. Debouncing 기법 적용.
2. 조건에 맞는 API 호출 기능 적용.
3. 캐싱 적용.
Debouncing란?
디바운싱의 개념은 간단하게 말해서 특정 시간이 지난 후 여러 개의 이벤트 중에 마지막 이벤트를 기준으로 한 가지의 이벤트만 발생시키는 것입니다.
디바운싱의 대표적인 예로는 검색 기능의 키 이벤트 input이 있습니다. 모든 글자들의 이벤트를 API 호출하게 되면 API 데이터의 전송 값이 비싸지게 되기 때문에 디바운싱을 적용하면 성능을 향상 시킬 수 있습니다.
하지만 꼭 API 호출을 디바운싱 방법을 적용하여 최적화하는 것이 좋은 것은 아닙니다. 일반적인 검색엔진 사이트 구글, 네이버, 다음 같은 경우 디바운싱을 적용을 하지 않았습니다. 이유가 뭘까요?
바로 사용자 경험을 좋게하기 위해서입니다. 검색엔진 사이트 경우에 주요 서비스가 바로 검색입니다. 이럴 경우 많은 사용자들이 검색을 사용하고 조금이라도 좋은 경험을 주는 것이 좋기 때문에 일정 기간 후에 API 호출을 하는 기법은 좋은 경험을 주지 않을 수 있습니다.
따라서 자기가 사용하기 적합한 사이트에 적절하게 사용해주는 것이 중요합니다.
useDebounce의 훅을 만들어 사용하였습니다. input의 value 값과 delay가 파라미터로 받고 있습니다. useEffect의 동작이 발생하는데 해당 value 값이 변했을 때만 작동하며 useEffect 속 핸들러는 500 딜레이를 받으며 핸들러를 만들게 됩니다. 이것이 클린업 함수를 사용해서 unmount시에 clearTimeout으로 초기화합니다.
debounce / throttle 관련해 react 18에서 지원하는 새로운 hook이 나왔습니다. useDefferredValue, useTransition 이 훅들에 대한 것은 다음번에 정리하겠습니다.
조건에 맞는 API 호출 최적화
조건에 맞는 API 최적화로는 간단하게 한글 자음 모음으로 생각했습니다. 예로 한글의 자음 모음이 완성되어야지 API Call이 들어가는거고, 모음과 자음만 사용했을 경우는 API Call이 들어가지 않게 됩니다.
handle change 함수를 보게 되면 inputValue를 통해 해당 input의 value 값을 받아옵니다. 이후 completedInput의 변수를 만들게 되는데 checkHangul util을 통해서 이 변수가 완성된 변수인지 확인하게 됩니다.
checkHangul의 변수는 만약 한글이 모음 자음이 완성되지 않았을 경우 value의 값의 길이를 0으로 만듭니다. 따라서 keyword의 길이가 1보다 작기 때문에 useEffect 속 로직이 발생하지 않아 api 호출을 막습니다.
반면에 완성되었을 경우 그대로 input의 Value를 담어주어 api call이 발생하게 됩니다.
캐싱 적용
검색에 맞는 데이터들을 호출하게 되는데 이러한 데이터들을 캐싱을 통해 저장합니다.
