useEffect

mangjell·2022년 4월 9일
0

useEffect란?

클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 있다.

그렇다면 함수형 컴포넌트에서의 생명주기관련 훅은 무엇일까?

바로 useEffect 이다!!

useEffect의 실행 시점

useEffect의 주의사항 2가지!!

오픈 API를 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을 달게끔하기 위해서!

profile
프론트엔드 개발자

0개의 댓글