카카오 책 검색 api활용(react)

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide

Kakao Developers

 

api 연동 방법

https://wonit.tistory.com/304

[React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API)

https://velog.io/@hyunn/Axios-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC

Axios 라이브러리 개념 정리

react project 만들기

$ create-react-app 폴더명

axios 설치 

$ npm install axios

기본적인 사용방법

https://wonit.tistory.com/305?category=793048

 

src/api.js

import axios from "axios";

const Kakao = axios.create({
  baseURL: "https://dapi.kakao.com",
  headers: {
    Authorization: "KakaoAK 카카오restkey",
  },
});

// 책 검색
export const bookSearch = (params: {
  query: any;
  sort: string; 
  page: number;
  size: number;
}) => {
  return Kakao.get("/v3/search/book?target=title", { params });
};

// book api
export const book = () => {
  return Kakao.get("/v3/search/book?target=title");
};

 

App.js

import React, { useEffect } from "react";
import { bookSearch } from "./api";

import "./App.css";

const App = props => {
  useEffect(() => {
    blogSearchHttpHandler();
  }, []);

  const blogSearchHttpHandler = async () => {
    // paramter 설정
    const params = {
     query: "검색어" // 필수 속성 전송에 포함될 data정보
     sort: "accuracy", // 기본값 accuracy(정확도순), recency(최신순)
     page: 1 // 결과 페이지 번호, 1~50 사이의 값, 기본 값 1
     size: 10, // 출력될 문서 갯수 기본값 10
    };

    const { data } = await bookSearch(params); // api 호출
    console.log(data); // console 결과 출력
  };

  return (
    <div className="container">
      <h1>독서 기록</h1>
      <input className="search" type="text" name="query"></input>
      <button type="submit">검색</button>
    </div>
  );
};

export default App;

//import React, { useEffect } from "react";
import { bookSearch } from "./api";
import { useState } from "react";

import "./App.css";

const App = props => {
  const [text, setText] = useState("");
  const [searchData, setSearchData] = useState([]);
  
    // 검색어가 바뀔 때 호출되는 함수
  const onChange = (e: any) => {
    setText(e.target.value);
  };
  // 버튼 클릭 시 실행되는 함수
  const onSubmit = (e: any) => {
    bookSearchHandler();
  };

  const blogSearchHttpHandler = async () => {
    // paramter 설정
    const params = {
     query: "검색어" // 필수 속성 전송에 포함될 data정보
     sort: "accuracy", // 기본값 accuracy(정확도순), recency(최신순)
     page: 1 // 결과 페이지 번호, 1~50 사이의 값, 기본 값 1
     size: 10, // 출력될 문서 갯수 기본값 10
    };

    const { data } = await bookSearch(params); // api 호출
    console.log(data); // console 결과 출력
    setSearchData(data.documents); //검색된 object 결과저장
  };

    //저장된 object data map으로 출력
  return (
       <>
      <input
        onChange={onChange}
        className="search"
        type="text"
        value={text}
      ></input>
      <button onClick={onSubmit} type="submit">
        검색
      </button>
      <div>값:{text}</div>
      <main>
        {searchData &&
          searchData.map((data: IBook, index) => {
            return (
              <div key={index}>
                <img src={data.thumbnail} alt={data.title} />
                <span>{data.title}</span>
                <a href={data.url}>상세정보</a>
                <div>{data.contents}</div>
              </div>
            );
          })}
      </main>
    </>
  );
}

export default App;