[Learn Next.js] 검색 기능 구현

검색 기능은 다음과 같이 클라이언트 및 서버 양쪽에 걸쳐있는 기능입니다.

1. 사용자가 클라이언트에서 텍스트를 입력합니다.
2. 입력된 텍스트를 URL 검색 매개변수로 추가합니다.
3. URL 검색 매개변수의 값을 사용하여 데이터베이스를 쿼리합니다.
4. 데이터베이스 쿼리의 결과를 사용하여 UI를 업데이트합니다.

URL 검색 매개변수

검색 키워드를 URL 상태 매개변수로 관리하면 다음과 같은 장점을 얻을 수 있습니다.

• 검색어가 입력된 상태의 웹 애플리케이션을 URL로 공유하거나 북마크할 수 있습니다.
• URL 검색 매개변수는 서버에서 직접 사용할 수 있으므로, 페이지 초기 렌더링에 사용할 수 있습니다.

구현 과정

1. 검색어를 입력받는 input 태그에 onChange 이벤트 리스너를 추가합니다.
2. useSearchParams 후크와 URLSearchParams API를 사용하여 입력과 검색 매개변수를 동기화시킵니다.
3. useRouter 후크의 replace 메서드 및 usePathname 후크를 이용해 해당 URL로 이동시킵니다.

최적화 : 디바운싱

위 과정을 통해 검색 기능을 구현한 경우, 매 입력마다 DB를 쿼리하여 리소스 낭비가 발생합니다.

이 문제를 해결하기 위해 디바운싱이라는 기술을 사용할 수 있습니다.

디바운싱이란 함수의 실행 속도를 제한하는 기술입니다. 즉, 여기서는 입력이 몇 초간 중단되었을 때 DB를 쿼리하도록 만들 수 있습니다.

디바운싱의 동작 원리는 다음과 같습니다.

1. 키 입력 - 타이머 시작
2. 타이머에서 설정한 시간에 도달하기 전에 이벤트가 발생하면 타이머 초기화
3. 타이머에서 설정한 시간에 도달하면 DB 쿼리

React 프로젝트에서 디바운싱을 구현하기 위한 use-debounce라는 라이브러리가 존재하므로 이를 사용하면 됩니다.

https://www.npmjs.com/package/use-debounce

use-debounce