Frontend/React
[React] 검색어 자동완성
거의 모든 웹사이트나 앱에서 사용자의 편의를 위해 검색어 자동완성 기능이 구현되어 있다고 생각한다. 부트캠프 과제에서 모두 검색어 자동완성 기능은 구현을 했었기 때문에 기록을 해두려한다. 최근 진행했던 토이프로젝트 검색어 자동완성 Code 가독성을 위해 css 코드나 불필요한 코드들은 정리한 코드. 1. Input에 입력되는 데이터를 searchValue 상태값에 업데이트 2. showDropDown 함수를 searchValue(검색어)가 바뀔때마다 실행하기 위해 useEffect() 처리 3. 상품데이터에서 filter() 를 통해 상품명에 검색어가 포함된 데이터들만 필터링해주고 dropDownList 상태값에 업데이트 4. 필터링된 데이터인 dropDownList를 map 함수를 이용해 렌더링 exp..
