[React] useEffect의 실행 시점에 대해 알아보자

목차

 

useEffect의 실행 시점

import { useEffect } from "react";

function Practice(){
    console.log('1');

    useEffect(()=>{
        console.log('mount');
    }, []);

    console.log('2');

    return <div></div>
}

export default Practice;

 

 

컴포넌트의 랜더링이 끝난 후 useEffect가 실행된다는 것을 알 수 있다. 

위에서 콘솔에 두번 찍힌 것은 React의 엄격 모드 때문에 두번 실행된 것이다.

 

클린업 함수의 실행 시점

import { useEffect, useState } from "react";

function Practice() {
  const [input, setInput] = useState("");
  console.log("1");

  useEffect(() => {
    console.log("mount");
    return () => {
      console.log("unmount");
    };
  }, [input]);

  console.log("2");

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(event) => {
          setInput(event.target.value);
        }}
      />
    </div>
  );
}

export default Practice;

 

더 자세히 알아보기 위해 strict mode를 해제하고 보겠다.

 

컴포넌트가 처음 랜더링되면 1, 2, mount순으로 실행되는 것을 볼 수 있다.

 

그 후 input이 입력되어 리랜더링 되면 1, 2, unmount, mount 순으로 실행되는 것을 볼 수 있다.

즉 리랜더링 시 재평가 => 언마운트 => 업데이트 순으로 진행되는데 재평가 한후 1, 2가 먼저 출력되고 그 다음 unmount가 되면서 cleanup함수가 실행된 후 update가 되면서 useEffect의 mount가 출력되는 것이다.

 

 

의존성 배열을 비웠을 때 cleanup함수의 작동여부

import { useEffect, useState } from "react";

function Practice() {
  const [input, setInput] = useState("");
  console.log("1");

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

  console.log("2");

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(event) => {
          setInput(event.target.value);
        }}
      />
    </div>
  );
}

export default Practice;

 

 

unmount가 출력되지 않는 것을 보면 작동하지 않는것을 알 수 있다.

한번 랜더링이 일어나고 말기 때문에 재평가 이후 unmount의 과정을 거치지 않기 때문이다.

 

 

컴포넌트가 중첩되었을 때 useEffect의 실행 순서

import { useEffect } from "react";

function Inner() {
  useEffect(() => {
    console.log("inner-mount");
  }, []);
}

function Outer() {
  useEffect(() => {
    console.log("outer-mount");
  }, []);
  return <Inner></Inner>;
}
function Practice() {
  useEffect(() => {
    console.log("main");
  }, []);

  return (
    <Outer>
      <Inner></Inner>
    </Outer>
  );
}

export default Practice;

 

컴포넌트의 랜더링이 완료되려면 Inner 컴포넌의 랜더링이 완료되어야 하므로

자식 컴포넌트 => 부모 컴포넌트 순으로 useEffect가 실행되는 것을 볼 수 있다.

 

자식 컴포넌트가 나열되어 있을 시 useEffect 실행 순서

import { useEffect } from "react";

function Inner1() {
  useEffect(() => {
    console.log("inner-mount1");
  }, []);
}
function Inner2() {
  useEffect(() => {
    console.log("inner-mount2");
  }, []);
}

function Outer({ children }) {
  useEffect(() => {
    console.log("outer-mount");
  }, []);
  return children;
}

function Practice() {
  useEffect(() => {
    console.log("main");
  }, []);

  return (
    <Outer>
      <Inner1></Inner1>
      <Inner2></Inner2>
    </Outer>
  );
}

export default Practice;

 

 

자식 컴포넌트의 랜더링이 끝나야 부모 컴포넌트의 랜더링이 완료되기 때문에 자식부터 순서대로 useEffect가 호출되는 것을 볼 수 있다.

 

랜더링과 관련해 더 알고 싶다면 아래를 참고하자

참고

https://be-senior-developer.tistory.com/145

[React] 랜더링의 동작과 관련 개념을 자세히 알아보자