Axios 도전-2화-

결과적으로 완성한 코드는 이러하다.
UseEffect로 무한반복을 막아주고, UseState로 로딩 중일 때는 다른 문자열 또는 이미지가 뜨게 하여 로딩 중에도 컴포넌트가 깨지지 않게 하였고, setTimout을 이용해 API가 추후 많이 사용될 때에도 매 호출이 너무 빠르게 몰려가지 않도록 예의를 지켰다.

지금 코드는 API 한 개로 카드에 넣어주는 정도지만, 카드 리스트를 받아와서 MAP 함수로 이 컴포넌트를 많이 늘리고, 카드 리스트에서 주소를 props로 받아 와서 카드 하나하나를 이 API 주소에 넣어주는 식으로 개선이 가능할 것이다.

    const [card, setCard] = useState();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            axios
                .get(
                    "https://api.scryfall.com/cards/a7757e99-8d51-4b92-b346-6961845def24"
                )
                .then(({ data }) => {
                    setCard(data);
                    setLoading(false);
                })
                .catch((error) => {
                    console.log(error);
                });
        }, 100);
    }, []);