[React] React 로 kakao 책 검색 사이트 만들기 : 1. Kakao API 검색 기능 구현

카카오 API 사용하기

먼저 Kakao Developers 로 들어가서 rest apia key를 받습니다.

src/api.js

import axios from 'axios';

const Kakao = axios.create({
  baseURL: 'https://dapi.kakao.com', // 공통 요청 경로를 지정해준다.
  headers: {
    Authorization: 'KakaoAK {Kakao API Key}',
  },
});

// search book api
export const bookSearch = (params) => {
  return Kakao.get('/v3/search/book', { params });
};

{Kakao API Key} 에 자신이 카카오 에서 발급 받은, API 키를 넣어줍니다.

책 검색 API 호출, 상태 관리하기

AppStateProvider에서 책 검색 상태를 관리해줍니다.

bookSearchHttpHandler 함수의 인자값으로, 첫 번째는 변경된 query state이고, 두 번째는 리스트를 초기화 한 후 다시 랜더링 할 것인지의 true/false 입니다.

bookSearchHttpHandler에서 api를 호출한 후, 호출 한 데이터와 현재 books state를 병합해 줍니다.

Kakao 책 검색 API 링크를 통해 parameter를 참고할 수 있습니다.

const [books, setBooks] = useState([]);
const [query, setQuery] = useState('');

  // 책 검색
  useEffect(() => {
    if (query.length > 0) {
      bookSearchHttpHandler(query, true); // 컴포넌트 마운트 후에, 함수를 호출한다.
    }
  }, [query]);

  // book search 핸들러
  const bookSearchHttpHandler = async (query, reset) => {
    // Parameter 설정
    const params = {
      query: query,
      sort: 'accuracy', // accuracy | recency 정확도 or 최신
      page: 1, // 페이지번호
      size: 10, // 한 페이지에 보여 질 문서의 개수
    };

    const { data } = await bookSearch(params); // api 호출
    if (reset) {
      setBooks(data.documents);
    } else {
      setBooks(books.concat(data.documents));
    }
  };

  const searchBook = (text) => {
    setQuery(text);
  };