키보드로 조작 가능한 자동완성 검색창 구현 화면 GIF (옵션 목록은 키워드에 따라 API 호출)

검색창 자동 완성 기능은 <input> <datalist> 태그를 이용해 빠르게 구현할 수 있다(참고 노트). 키보드 방향키로 옵션을 선택할 수도 있다. 하지만 이 방법은 리스트 요소에 클릭 이벤트를 할당할 수 없는 단점이 있다(검색을 정말 많이 해봤지만 결론은 불가).

검색창에 키워드를 입력한 후 목록에 있는 각 옵션(<li>)을 클릭할 때마다 특정 액션을 취해야 한다면 위 방법을 사용할 수 없다. 대안은 React Select처럼 잘 만든 라이브러리를 사용하거나, 몇 년간 유지 보수한 라이브러리보단 완성도는 조금 떨어질 수 있지만 직접 구현할 수 있다. 아래는 직접 구현한 내용을 기록한 노트.

구현 목표

• 마우스로 리스트 이동 / 선택
• Enter 키로 선택
• 방향키로 리스트 이동 (Keyboard navigate)
• 스크롤이 생긴 목록에서 방향키로 이동했을 때 포커스 전환/스크롤 이동 (Scrollable)
• 방향키 ⇄ 마우스로 전환해도 항상 마지막에 위치했던 옵션 인덱스에서 이동 시작

기본 구조

• 🔍️ AutoComplete.tsx 기본 구조 톺아보기

여러 곳에서 사용할 수 있도록 아래 상태는 부모 컴포넌트에서 전달받도록 작성했다. AutoComplete 컴포넌트에선 키워드가 변경될 때마다 setTerm 함수를 호출하고, 해당 키워드(term)에 대한 옵션 목록(options)을 전달받아(키워드에 대해 API 호출) 리스트를 표시한다. 리스트의 각 옵션을 클릭하면 selectHandler 핸들러를 호출해 선택한 옵션 목록을 업데이트한다.

1. 검색어(키워드) 상태 : term
2. 검색어 상태 변경 함수 : setTerm
3. 입력한 검색어에 대한 옵션 목록(배열) : options ex) [{ id: number, name: string }, {...}]
4. 선택한 옵션 목록 : selected