[쿠킹레시피] 검색창 컴포넌트 및 검색 결과 출력

 

 

 

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./searchbar.css";

export default function SearchBar() {
  const [term, setTerm] = useState(""); //검색어
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    navigate(`/search?q=${term}`); //q= 검색어로 요청한다.
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="search">검색:</label>
        <input
          type="text"
          id="search"
          onChange={(e) => setTerm(e.target.value)}
        />
      </form>
    </div>
  );
}

 

 

 

 

.searchbar form {
  display: flex;
  align-items: center;
}
.searchbar label {
  word-break: keep-all;
}
.searchbar input {
  margin-left: 10px;
}

 

 

 

Navbar.jsx에 추가

 

 

 

 

 

 

 

 

 

 

 

 

 

Saerch.jsx

https://www.npmjs.com/package/json-server

json-server

 

import { useLocation } from "react-router-dom";
import "./Search.css";
import { useFetch } from "../../hooks/useFetch";
import { RecipeList } from "../../components/RecipeList";
export default function Search() {
  //요청 주소의 쿼리스트링을 가져오는 방법
  const queryString = useLocation().search;
  const queryParams = new URLSearchParams(queryString);
  const query = queryParams.get("q"); // q에 해당하는 값을 쿼리스트링에서 가져옴

  const url = "http://localhost:3030/recipes?q=" + query;
  const { data, isPending, error } = useFetch(url);

  return (
    <div>
      <h2 className="page-title">"{query}"를 포함하는 레시피는 </h2>
      {error && <p className="error">{error}</p>}
      {isPending && <p className="loading">로딩중</p>}
      {data && <RecipeList recipes={data} />}
    </div>
  );
}

 

 

 

 

 

그리고 만약에 검색 결과가 없을 경우에는 

빈 객체로 리턴되게 되는데, 

이럴 경우에는 검색 결과가 없다는 메세지를 출력하도록 수정한다.