[Axios(get)] kakao book 검색

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))
  }, []);
  useEffect(() => {
    // 렌더링될때 한번 data에 변화가 생기면 한번더 실행
    console.log(data)
  }, [data]);

  return (
    <div>
      {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;

App.js

import AxiosGet from './components/axios/axiosGet'


function App() {

  return (
    <div className="App">
      <h2>API 연습</h2>
      <AxiosGet />
    </div>
  );
}


export default App;

console 창을 보면 axiosGet.jsx 파일에서 처음에 렌더링 할 때 data 안에 빈 배열이 있지만 렌더링 후 axios를 통해 데이터를 가져와 setData 안에 데이터를 넣어줍니다 data에 변화가 생기면
변화를 감지하고 두 번째 userEffect가 실행이 돼서 console 창에 setData에 새롭게 넣어준 데이터들을 출력해 줍니다 그리고 map 함수를 다시 실행해 data 안에 있는 값을 화면에 출력해 줍니다