[react] kakao 책 검색 api 사용하기

 

Kakao API을 사용하기 위해서는 REST_API_KEY 를 알아야하는데 https://developers.kakao.com/ 에 로그인을 하고 내 어플리케이션을 등록한 후 앱키에 들어가면 정보를 알 수 있다.

 

 

 

서버와 데이터를 주고받기 위해서는 HTTP통신을 해야하는데 react에는 HTTP client 내장 클래스가 없어 Axios를 설치해야 한다.

 

npm install axios
yarn add axios

 

 

적용 코드 ↓ ↓ ↓

import axios from 'axios';
import './App.css';
import {useState } from 'react';


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

  const kakaoSearch = params =>{
      return Kakao.get('/v3/search/book',{params})
  }

  const [inputValue, setInputValue] = useState('')
  const [books, setBooks] = useState([]) // 책 내용을 담을 배열


  const getBooks = async(value) => {
      const search = value
          try {
              if(search === "") {
                  setBooks([])
              }else {
                  const params = {
                      query : value,
                      size : 45, //검색 리스트 수
                      target : 'title'
                  };
                  const result = await kakaoSearch(params);
                  if(result){
                      setBooks(result.data.documents);
                  }else {
                      console.log("fail");
                  }
                  
              }
          } catch(error) {
              console.log('error', error)
          }
  }
  
  return (
    <div className="App">
        <input type="text" value={inputValue} onChange={(e)=>setInputValue(e.target.value)}/>
        <button onClick={()=>getBooks(inputValue)}>버튼</button>
        
        <div>
          {books.map((item, idx)=><p key={idx}>{item.title}<img src={item.thumbnail} alt=''/></p>)}
        </div>
    </div>
  );
}

export default App;

 

 

그럼 아래와 같이 setBooks에 내용이 담기고 필요한 요소를 가져다가 사용하면 된다!

 

스타일은 컴포넌트를 만들어서 다시 디자인했다