react에서 api 활용

인증키 없이 이미지 데이터 불러오는 연습문제다.
코드 구성 및 순서, 작성목적에 따라 2가지로 나눠봤다.
공통적으로 이미지가 랜덤으로 불러와서
페이지 reload 시마다 이미지가 바뀐다는 점~

1, 재사용 가능성 고려
여러 곳에서 api 활용할 경우에 적합

import React, { useEffect, useState } from "react";
import axios from "axios";

const getRandomPhotos = () => {
  return axios
    .get("https://api.thecatapi.com/v1/images/search?limit=10")
    .then((response) => {
      console.log(response);
      return response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};

const CatPics = () => {
  const [randomPhotos, setRandomPhotos] = useState([]);

  useEffect(() => {
    getRandomPhotos().then((images) => {
      console.log(images);
      setRandomPhotos(images); //truyen images vao
    });
  }, []);
  return (
    <div className="grid grid-cols-5 gap-3 p-3">
      {randomPhotos.map((item) => (
        <div key={item.id} className="p-2 bg-white shadow-md rounded-lg">
          <img
            src={item.url}
            alt="imgAlt" //필수
            className="w-full h-full object-cover rounded-lg"
          />
        </div>
      ))}
    </div>
  );
};

export default CatPics;

2, 가독성 고려
api 하나만 사용할 경우에 적합

import React, { useEffect, useState } from "react";
import axios from "axios";

const DogPhotos = () => {
  const [dogs, setDogs] = useState([]);

  useEffect(() => {
    axios
      .get("https://dog.ceo/api/breeds/image/random/10")
      .then((response) => {
        setDogs(response.data.message);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="grid grid-cols-5 gap-3 p-3">
      {dogs.map((dog, index) => (
        <div key={index} className="p-2 bg-white shadow-md rounded-lg">
          <img
            src={dog}
            alt="Dog"
            className="w-full h-full object-cover rounded-lg"
          />
        </div>
      ))}
    </div>
  );
};

export default DogPhotos;