Today I Learned

오늘 한일✅

• 검색 기능에 Debounce 적용하였다

🚩 Debounce 적용한 이유

1. 한 글자씩 입력이 될 때 마다 그 값으로 API요청을 하도록 구현하였다.
2. 한 글자씩 입력할때마다 필요 이상의 요청이 발생할것이라고 생각하였는데 실제로 체감 시간도 길었고 불필요한 요청이였다.

그래서 찾아보다 Debounce 적용하기로 하였다!

🚩 Debouce가 뭡니까?

• 사용자의 입력과 같은 이벤트 발생 시 일정 시간 동안 추가적인 이벤트 발생을 제어하는 기술
• 검색 기능을 구현한다면 사용자가 검색어를 입력하는 동안에 매 입력마다 검색을 실행하지 않고, 입력어 끝난 후 일정 시간 동안 추가 입력이 없다면 검색을 실행

구현방법

• useEffect를 사용하여 입력값이 변결될 때마다 디바운스를 적용하여 API 요청 지연시킴

	// 검색어 데이터
	const getdata = async () => {
		const response = await fetch(
			`${process.env.NEXT_PUBLIC_SERVER_BASE_URL}/search/aladin/keyword?keyword=${keyword}`,
		);
		const data = await response.json();
		setSearchData(data);
	};

	// keyword가 변할 때마다 debouce 이벤트로 setTimeout을 사용하여 0.4초후에 데이터를 호출
	useEffect(() => {
		const debounce = setTimeout(() => {
			const word = keyword as string;
			if (word.length > 0) {
				getdata();
			}
		}, 400);
		return () => clearTimeout(debounce);
	}, [keyword]);
    

• 0.4초 동안 추가적인 입력이 없을 경우 getdata 함수를 호출하도록 설정하여 API 호출의 최적화를 진행하였다.