[Axios(get)] kakao book 실시간 검색하는 검색창

저번글 에서는 API를 이용해서 책 데이터를 가져왔습니다. 이번에는 input창에 타이핑할시 실시간으로 검색해서 화면에 출력해주는 기능을 추가했습니다

axiosGet.jsx

import {useEffect, useState} from 'react'
import styled from 'styled-components'
import axios from 'axios'


const AxiosGet = () => {
  const [data, setData] = useState([]);
  useEffect( () => {
    axios.get("https://dapi.kakao.com/v3/search/book?target=title", {
      params: {
        // 검색어 
        query: '미움받을 용기'
        
        // 필수아닌 검색 조건들
        
        //결과 문서 정렬 방식
        //sort	String	, accuracy(정확도순) 또는 latest(발간일순), 기본값 accuracy
        
        //결과 페이지 번호
		//page	Integer	, 1~50 사이의 값, 기본 값 1
        
        //한 페이지에 보여질 문서 수
		//size	Integer	, 1~50 사이의 값, 기본 값 10
        
		//target	String	검색 필드 제한
		//사용 가능한 값: title(제목), isbn (ISBN), publisher(출판사), person(인명)
      },
      headers: {
        Authorization: 'KakaoAK {apiKey 입력}'
      },
    })
    .then(res =>
      setData(res.data.documents)
    )
    .catch(err => console.log(err))
  }, []);

  const onchange = (e) => {
    e.target.value && axios.get("https://dapi.kakao.com/v3/search/book?target=title", {
      params: {
        query: e.target.value
      },
      headers: {
        Authorization: 'KakaoAK {apiKey 입력}'
      },
    })
      .then(res =>
        setData(res.data.documents)
      )
      .catch(err => console.log(err))
  }
  return (
    <div>
      <input type="text" onChange={onchange}/>
      {data.map((v,i) => {
          return(
            <div key={i}>
              <h2>{v.title}</h2>
              <Imgs src={v.thumbnail}/>
              <div>{v.contents}</div>
              <div>{v.price}원 저자 {v.authors.map(v => v)}</div>
              <div>링크 <a href={v.url}>클릭</a></div>
            </div>
          )
        })
      }
    </div>
  )
}
const Imgs = styled.img`
  width: 200px;
  height: 400px;
`
export default AxiosGet;

input 태그와 onChange 함수만 추가해서 구현했습니다
onChange 함수를 이용해서 새로 데이터를 가져와 setData에 데이터를
넣어주면 데이터 변화를 감지하고 data.map 함수가 재실행돼서 새로운 데이터를
화면에 출력해 줍니다