UseEffect

useEffect Hooks는 React 16.8버전에 새로 추가되었다.

컴포넌트가 렌더링 될 때마다 특정작업을 실행할 수 있도록 하는 Hook
클래스형 컴포넌트에서 사용할 수 있던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.

⚒ 기본 형태
useEffect(function, deps)

• function : 실행하고자 하는 함수
• deps : 배열 형태. function을 실행시킬 조건. 검사하고자 하는 값 or 빈 배열
  (deps에 특정 값을 넣게 되면,
  컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때useEffect를 실행합니다.

1. Component가 Mount 되었을 때(나타날 때)

 useEffect(() => {
    console.log("렌더링 될때마다 실행");
  });

deps을 생략하면 컴포넌트를 렌더링 될 때마다 useEffect가 실행된다.

2. Component가 Update 되었을 때(props, state 변경)

 useEffect(() => {
    console.log(name);
    console.log("name이라는 값이 업데이트 될 때만 실행");
  },[name]);

특정 값이 업데이트 될 때만 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다. ( 의존 값이 들어있는 배열 deps라고도 한다. )

업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.
따라서 업데이트 될 때만 특정함수를 실행하고 싶다면 아래와 같이 쓰면 된다.

 const mounted = useRef(false);
  useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
    } else {
      console.log(name);
      console.log("업데이트 될 때마다 실행");
    }
  }, [name]);

3. Component가 Unmount 되었을 때(사라질 때) & Update 되기 전

 useEffect(() => {
    console.log("컴포넌트 나타남");
    console.log(name);
    return () => {
      console.log("cleanUp 함수");
    };
  });

useEffect는 함수를 반환할 수 함수를 cleanup이라고 한다.

Unmount 될 때만 cleanup 함수를 실행시키고 싶다면 deps에 빈 배열을,
특정 값이 업데이트되기 직전에 cleanup 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 된다.

예제 )

import{ useEffect, useState } from "react"
import axios from "axios"
import Image from "next/image";

export default function OpenapiWithUseEffectPage() {
 const [dogUrl, setDogUrl] = useState("")

 
 // componentDidMount
 // 처음 한번 실행되고 의존성 배열에 변화가 있을 때만 실행
 // 비어있는 경우 처음 한번 실행되고 그 후로 실행되지 않는다.
 // 오래된 방식 -> 최근에는 react-query를 이용해 작성한다.
 
 
 useEffect(()  =>{
 
   // 의존성 배열에서는 async 사용 불가
   // 따라서 안에 나만의 함수를 하나 만들어 준다
   
   const fetchDog = async () => {
     const result = await axios.get("https://dog.ceo/api/breeds/image/random")
     setDogUrl(result.data.message)
   }
   fetchDog();
 },[의존성 배열])



 return (
   <div>
     <h1>오픈 API연습</h1>
     <Image src="dogUrl" alt="dog"/>
   </div>
 )
}

의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝남.(1번만 실행)