서치바 (1) 썸네일형 리스트형 [React] 검색 기능 구현 구현할 기능은 검색 기능이다. 레이아웃 요청 받은 디자인은 다음과 같다. 처음엔 div안에 돋보기 이미지와 input 태그를 사용하는 방법으로 구현했으나 검색 시 뷰의 전환과 동시에 쿼리를 넘겨야 했기에 form 태그를 이용하는 방법을 택했다. 카멜 케이스로 작성해야하는데 스네이크 케이스가 너무 보기 편하다.. 기능 구현 검색 대상은 게시물의 제목과 내용이다. 쿼리 전달 useState를 이용해 입력된 query를 받아오고 변화를 감지하기 위해 onChange를 사용했다. filter함수를 통해 입력값과 데이터를 소문자로 변환해 전달할 수 있도록 했다. const [query, setQuery] = useState(""); const keys = ["title", "content"]; // 키를 사용해 .. 이전 1 다음
