클래스형 컴포넌트에는 componentDidMout
와 같은 생명주기 메서드들이 있다.
그렇다면 함수형 컴포넌트에서의 생명주기관련 훅은 무엇일까?
바로 useEffect
이다!!
import axios from "axios";
import { useEffect, useState } from "react";
export default function OpenapiWithUseEffectPage() {
const [dogUrl, setDogUrl] = useState("");
// 임의의 함수하나를 useEffect안에서 만들어주고 불러줘야 async를 달 수 있다.
useEffect(() => {
const aaa = async () => {
const result = await axios.get("https://dog.ceo/api/breeds/image/random");
setDogUrl(result.data.message);
};
aaa();
}, []);
return (
<div>
<div>오픈API 연습!!!</div>
<img src={dogUrl} />
</div>
);
}
사용한 API는 오픈API로 랜덤한 강아지 사진이 나오게끔 제공해주는 API이다.
useEffect를 통해서 그려주게 되는데, 유심히 볼만한 부분은 aaa라는 함수를 useEffect안에서 만들어주고 function call을 한 부분이다!
이유: async와 await을 달게끔하기 위해서!