React Native 알라딘 open api 사용

알라딘 상품 리스트 api 를 이용해서 베스트셀러를 추천하는 부분을 만들었는데

const Recommend = () => {
  const [bookApiObj, setBookApiObj] = useState({
    title: "",
    author: "",
    description: "",
    cover: "",
  });
  const [etcBookImg, setEtcBookImg] = useState([]);

  const getBooks = async () => {
    try {
      const bookApi = await axios.get(
        `http://www.aladin.co.kr/ttb/api/ItemList.aspx?ttbkey=[생성된키값]&QueryType=BlogBest&start=1&MaxResults=10&SearchTarget=Book&output=JS&Version=20131101`
      );
      const aaa = JSON.parse(bookApi.request._response);
      setBookApiObj(aaa.item[0]);
      setEtcBookImg(aaa.item.sort((a, b) => a.itemId - b.itemId));
    } catch (error) {
      console.log("Error가 발생했습니다.", error);
    }
  };

  useLayoutEffect(() => {
    getBooks();
  }, []);

상태관리를 위해 하나하나 useState()를 사용하다가 너무 코드가 많아 보기 안좋아서 하나의 useState()로 관리하게 만들고 api 사용법을 참고해서 axios.get(`url`)을 작성해서 불러오는데 _response 까지 perse하지않으면 undifinded 오류가 나와서 JSON.perse(bookApi.request._response) 를 해서 aaa라는 변수안에 담아주었다.

 

상단부분에서는 aaa 안에 item 이라는 배열중에서 0번째에 있는 걸 보여주게 해주었고 이후에 랜덤으로 보여주게 코드를 봐꿀 예정이다.

하단의 4개의 연관도서는 itemId를 가져와서 sort()를 이용해 a 에서 b를 뺀다음 정렬하는 배열을 반환해서 이미지만 보여주게 해주었다.

 

이제 Add 버튼 과 랜덤으로 돌리는 코드만 작성하면 된다...