useEffect

처음 페이지를 불러올 때 한 번만 로드하고 싶은 게 있다면 useEffect가 필요할 때다. 서버에서 초기값을 가져올 때, 그리고 리렌더링이 필요하지 않을 때 정말 유용한 hook인 듯하다. 물론 useEffect에는 다른 기능도 더 있다. useEffect 사용 방법 3가지를 정리했다.

사용 방법

useEffect 기본 폼은 아래와 같다. 이게 무언가 싶을 수 있지만 한 가지씩 뜯어보자.

import { useEffect } from "react";

export default function UseEffectPage() {
  useEffect(() => {
    return () => {};
  }, []);

  return (
    <>
      <div></div>
    </>
  );
}

 

1. 웹 처음 업로드할 때 한 번만 실행

기본 코드

  useEffect(() => {
  // 실행 코드
  }, []);

useEffect 기본 폼에서 리턴 함수를 뺐다. 이게 끝이다. 실행 코드라고 써둔 곳에 한번만 로드하고 싶은 변수, 함수 등 코드를 적어 넣으면 끝이다. 다른 걸 건들일 필요 없다. 빈 배열은 무조건 넣어야 한다. 배열의 존재 이유는 두 번째 특정 조건이 바뀔 때마다 실행에서 이해하자.

 

사용 예시

  useEffect(() => {
    const fetchDog = async () => {
      const result = await axios.get("https://dog.ceo/api/breeds/image/random");
      setDogUrl(result.data.message);
    };

    void fetchDog();
  }, []);

무료로 강아지 사진을 랜덤으로 뽑아오는 OpenAPI를 사용한 코드다. 처음 페이지가 로드될 때 api에서 받아온 값을 state에 저장하는 코드다. 첫페이지 그릴 때 화면에 강아지가 나오게 하고자 한 코드인 셈. 강아지 대신 특정 데이터를 불렀다면 첫 로드 때 불러올 코드를 넣으면 해당 부분이 로드된다는 뜻이다.

 

2. 특정 값이 바뀔 때마다 실행

기본 코드

  useEffect(() => {
  // 실행 코드
  }, [의존성배열]);

useEffect는 인자를 두 개 받는다. 실행 코드가 작성될 함수와 함수를 어떻게 작동시킬지 제어(?)하는 의존성 배열이다. 실행 코드를 넣는 건 1번과 같고, 의존성 배열만 다르다. 처음 로드할 때만 실행하고 싶으면 빈배열을 넣지만, 특정 값이 바뀔 때마다 실행하고 싶을 땐 이 의존성 배열에 해당 특정 값을 넣어주면 된다. 

 

사용 예시

import { useEffect, useState } from "react";

export default function LifeCycle() {
  const [isChange, setIsChange] = useState(false);

  const onClickChange = () => {
    setIsChange((prev) => !prev);
  };

  useEffect(() => {
    console.log("Changed!!");
  }, [isChange]);

  return (
    <>
      <div>
        <button onClick={onClickChange}>변경</button>
      </div>
    </>
  );
}

위 코드는 변경 버튼을 누를 때마다 isChange의 값이 true와 false로 바뀌는 state를 갖고 있다. 여기에 useEffectf를 사용했다. 의존성 배열에 isChange를 넣었은 후 다시 변경 버튼을 눌러보자. 그럼 콘솔에 "Changed!!"가 계속 찍히는 것을 볼 수 있다. 의존성 배열에 있는 isChange가 계속 변하기 때문에 useEffect가 계속 작동하는 것.

3. 페이지를 벗어날 때 실행

기본 코드

  useEffect(() => {
    return () => {
	//실행코드
    };
  }, []);

페이지를 벗어날 때 실행하고 싶다면 useEffect 실행 코드 넣는 곳에 return을 넣자. 끝이다. useEffect가 있는 페이지를 벗어난다면 위 return문을 마지막으로 실행한 후 벗어날 페이지로 이동한다.

 

사용 예시

import { useRouter } from "next/router";
import { useEffect } from "react";

export default function LifeCycle() {
  const router = useRouter();

  const onClickMove = () => {
    router.push("/");
  };

  useEffect(() => {
    return () => {
      console.log("Bye!!!");
    };
  }, []);

  return (
    <>
      <div>
        <button onClick={onClickMove}>이동</button>
      </div>
    </>
  );
}

페이지를 벗어날 때 "bye!!!"를 출력하게 한 코드다. 이동 버튼을 누르면 다른 페이지로 이동하게 되는데, 이동하기 전에 return에 요청사항을 실행하고 벗어남을 볼 수 있다.

 

마무리 

useEffect는 자주는 아니지만 필요할 때 요긴하게 쓰이는 hook인 듯하다. 서두에 말한 초기값을 불러올 때 뿐만 아니라, 특정 값을 계속 추적하고 싶을 때, 그리고 사용자가 페이지를 벗어날 때 인사말을 나타내는 코드 등 여러 아이디어를 가능케 하기 때문이다. 아, 1번, 2번, 3번을 모두 같이, 혹은 다 따로 사용하지 않는다. 그리고 1번이든 2번이든 return을 넣으면 3번도 동시 작동한다. 따라서 어떻게 작성하는 게 해다 페이지에서 코드 효율성이 좋인지 점검하고 사용하면 좋을 듯하다.

알면 쉽고, 모르면 한 없이 어려운 게 hook인 듯하다. react를 배우면 배울 수록 더욱 그렇다. useEffect가 이 생각을 더욱 견고하게 한다. 처음엔 hook 자체가 어려웠지만, useState 하나가 익숙해지니, 다른 hook들은 조금 더 쉽게 와닿기 시작한다. 단순 TIL은 지양하려고 하지만, 혹여나 잊어버릴까 싶어 다시 공부할 겸 정리했다.

 

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)