[React-BookStore] 알라딘API 검색 기능 추가

알라딘API를 사용해서 책 검색 기능을 추가하려고 한다. 

 

나중에 기억할 수 있도록 

 

과정을 기록하기 위해 포스팅 작성함

 

---

 

 

요청해야할 쿼리스트링은 아래와 같음

 

https://docs.google.com/document/d/1mX-WxuoGs8Hy-QalhHcvuV17n50uGI2Sg_GHofgiePE/edit#heading=h.npqn2iowpse8

알라딘 Open API 매뉴얼

요청 URL샘플 : http://www.aladin.co.kr/ttb/api/ItemSearch.aspx?ttbkey=[TTBKey]&Query=aladdin&QueryType=Title&MaxResults=10&start=1&SearchTarget=Book&output=xml&Version=20131101

 

 

 

postman으로 테스트를 해봤다. 

 

잘 됨. 

 

 

 

 

검색창 컴포넌트와 css 생성해서 검색창 틀 만듬 (계속 수정 할거라서 대강만듬)

React icon 라이브러리 설치해서 사용

https://react-icons.github.io/react-icons/search/#q=search

React icons search results

import React from "react";
import "./SearchBar.css";
import { FaSearch } from "react-icons/fa";

const Searchbar = () => {
  return (
    <>
      <div className="searchSection">
        <form>
          <label htmlFor="">
            <input
              type="text"
              className="search"
              placeholder="검색어를 입력하세요."
            />
            <a href="" className="searchBtn">
              <FaSearch />
            </a>
          </label>
        </form>
      </div>
    </>
  );
};

export default Searchbar;

.searchSection {
  border: 1px solid #527853;
  margin: 150px 0 50px 0;
  display: flex;
  box-shadow: 5px 5px 5px #f5f5f5;
}

.search {
  padding-left: 30px;
  width: 400px;
  height: 50px;
  border: none;
}

.searchBtn {
  padding: 20px;
  width: 100px;
  height: 50px;
  color: #527853;
}

 

 

 

 

그리고 일단 내가 구현하고자 하는 기능은

 

1. 검색어 입력 후 검색 버튼 누르면 검색페이지(Search) 로 넘어간다. 

그리고 그 페이지에서 파라미터로 검색어를 받아서 검색  결과를 출력하는 화면 

 

2. 검색어를 입력할 경우 실시간으로 검색해서 아래에 작게 보여주는?

아래와 같은 기능도 추가해 보고싶다. 

 

일단 1번 기능을 구현해보겠다. 

 

Searchbar에서 일단 검색어를 저장해서 다음 페이지로 넘겨 줄 수 있도록 

 

form에는 submit 시 발생하는 handleSubmit 함수를 추가하고, 

input에는 검색어를 한 글자 입력할 때마다 저장하도록 handleChange 함수를 추가하여 값을 저장한다.  

  <div className="searchSection">
        <form onSubmit={handleSubmit}>
          <label>
            <input
              onChange={handleChange}
              value={searchValue}
              type="text"
              className="search"
              placeholder="검색어를 입력하세요."
            />
            <button type="submit" className="searchBtn">
              <FaSearch />
            </button>
          </label>
        </form>
      </div>

 

 

일단 1번 기능에는 handleChange 함수는 사용되지 않을 듯 해서 일단 틀만 잡아준다. 

 

그리고 useNavigate를 사용해서 

 

검색어를 입력하고 submit을하면 저장된  searchValue를 가지고 search페이지로 이동하게한다. 

  const [searchValue, setSearchValue] = useState("");
  const navigate = useNavigate();

  //submit 시
  const handleSubmit = (e) => {
    e.preventDefault();

    if (searchValue === "") {
      alert("내용을 입력해 주세요!");
    } else {
      setSearchValue(e.target.value);
      navigate(`/search?q=${searchValue}`); //q= 검색어로 요청한다.
      setSearchValue("");
    }
  };

  //검색어 입력 시
  const handleChange = (e) => {
    setSearchValue(e.target.value);
    //  console.log(searchValue);
  };

 

 

Search페이지로 이동했을 경우 파라미터로 ㅎㅇㅎㅇ가 넘어온다

 

그러면 이제 해야할 일은 

 

받은 검색어를 가지고 

api로 알라딘에 데이터를 요청하는 것만 남음 

 

const Search = () => {
  //검색어로 넘어오는 파라미터 가져오기
  const queryString = useLocation().search;
  const queryParams = new URLSearchParams(queryString);
  const query = queryParams.get("q"); // q에 해당하는 값을 쿼리스트링에서 가져옴
  console.log(query);

 

위의 코드를 사용해서 q의 파라미터의 값을 가져와서 

테스트로 콘솔에 출력한다. 

 

 

 

잘 출력되는 것을 확인할 수 있다. 

 

이제 데이터를 가져와서 출력만 하면됨. 

 

 

resultBooks usestate를 만들어서 

검색 결과를 담도록 하겠다. 

 

 

일단 페이지가 시작하면 fetchBooks() 를 실행한다.

 

fetchBooks는 알라딘에 파라미터로 넘어온 query로 검색해서 

그결과를 setResultBooks로 결과 배열을 저장한다. 

그리고 출력 시 map 반복문으로 그 결과값을 출력한다. 

const Search = () => {
  //검색어로 넘어오는 파라미터 가져오기
  const queryString = useLocation().search;
  const queryParams = new URLSearchParams(queryString);
  const query = queryParams.get("q"); // q에 해당하는 값을 쿼리스트링에서 가져옴
  const [resultBooks, setResultBooks] = useState([]);

  useEffect(() => {
    fetchBooks();
  }, []);

  const fetchBooks = async () => {
    const response = await fetch(
      `http://www.aladin.co.kr/ttb/api/ItemSearch.aspx?ttbkey=${
        import.meta.env.VITE_BOOK_API
      }&Query=${query}&QueryType=Title&MaxResults=10&start=1&SearchTarget=Book&Cover=Big&output=js&Version=20131101`
    );
    const data = await response.json();
    setResultBooks(data.item);
  };

  return (
    <>
      {resultBooks.map((book) => (
        <BookCard key={book.itemId} book={book} />
      ))}
    </>
  );
};

 

알라딘을 검색해봤다.

알라딘의 각종 상품과 도서가 나온다.

css와 쿼리스트링은 한 번 다시 수정을 해야할듯