Search bar 구현

설계

-상품 검색 키워드를 입력받고 검색결과를 보여줌
-’전체, 한식, 양식, 일식, 중식’ 카테고리별 검색 가능
-검색결과 데이터가 없을 경우 ‘검색 결과가 없습니다.’ 메시지 출력
-검색결과 페이지에서 페이지네이션 적용

구조

참고:

React와 React 훅으로 검색 필터 만드는 법

1. 서버에서 데이터를 불러오는 API에 GET 요청을 보낸다.

2. 검색 입력 박스로부터 검색어 입력을 받아 (검색 쿼리query를)서버로 보낸다.

3. 데이터베이스에서 매칭되는 데이터를 다시 불러오기 요청을 한다.

   API데이터를 입력된 검색어와 같은 값들을 걸러내기 ⇒ filter 메소드 사용

4. 필터링 결과 result를 RecipeListPage UI에 담아 이미지, 레시피이름 표시