키보드 이벤트
-
[React] 검색어 자동완성 키보드 이벤트 기능 구현React 2023. 1. 5. 16:40
영화 검색 기능 구현 인풋에 텍스트를 작성하면 인풋 아래 자동 완성 목록이 나타나게 되는데 위와 같이 검색키보드 이벤트를 통하여 목록들 하나씩 선택되도록 구현해보려고 한다. 키보드 아래 방향키를 누르면 아래의 자동완성 목록들이 하나씩 선택되고 인풋에 선택된 영화의 제목이 나타난다. 자동 완성 목록 끝에서 아래 방향키를 누르면 다시 목록의 첫번째 아이템으로 이동한다. 첫번째 아이템에서 방향키 위를 누르면 기존의 내가 검색한 텍스트가 다시 나타난다. 선택된 검색 아이템을 기준으로 스크롤이 자동으로 된다. 엔터를 누르면 인풋에 나타난 텍스트를 쿼리로 받아 검색 결과 페이지로 라우팅된다. * 기능 구현 과정에 초점을 두어 코드를 간소화하여 작성하였다. 사용될 state 및 ref const [isAutoSear..