React hook의 useEffect

KHW·2021년 11월 25일

React

프레임워크

목록 보기

33/43

useEffect

컴포넌트가 렌더링 될때마다 특정 작업을 실행 시켜주는 역할

useEffect와 클래스 컴포넌트

useEffect는 클래스 컴포넌트의
componentDidmount / componentDidUpdate / componentWillUnmount를 포함한다.

기본적으로 componentDidmount를 두번째 매개변수가 []일 때 유사하고
[변수]가 존재할 경우 componentDidmount와 componentDidUpdate가 둘다 수행되고
해당 컴포넌트가 사라질 경우 처리를 위한 return을 통해 componentWillUnmount를 처리한다.

부모관계간에 실행되는 순서

App.js
GrandParent.jsx
Parent.jsx
Child.jsx

각각은 위에서 아래로 연관되어있다.

App.js

import logo from "./logo.svg";
import GrandParent from "./component/GrandParent.jsx";
import "./App.css";

function App() {
  // console.log(GrandParent);
  return <GrandParent></GrandParent>;
}

export default App;

GrandParent.jsx

import Parent from "./Parent.jsx";
import { useEffect, useState } from "react";
const GrandParent = () => {
  const [GrandParent, setGrandParent] = useState("GrandParent");
  useEffect(() => {
    console.log("GrandParent useEffect");
  }, []);
  console.log("GrandParent component exact");
  return (
    <div>
      {GrandParent}
      <Parent></Parent>
    </div>
  );
};

export default GrandParent;

Parent.jsx

import Child from "./Child.jsx";
import { useEffect, useState } from "react";
const Parent = () => {
  const [Parent, setParent] = useState("Parent");
  console.log("Parent component exact");
  useEffect(() => {
    console.log("Parent useEffect");
  }, []);
  return (
    <div>
      {Parent}
      <Child></Child>
    </div>
  );
};

export default Parent;

Child.jsx

import { useEffect, useState } from "react";
const Child = () => {
  const [child, setChild] = useState("child");
  console.log("Child component exact");
  useEffect(() => {
    console.log("Child useEffect");
  }, []);
  return <div>{child}</div>;
};

export default Child;

즉, 간단하게
App 컴포넌트는 자식으로 GrandParent 컴포넌트를 포함하고
GrandParent 컴포넌트는 자식으로 Parent 컴포넌트를 포함하고
Parent 컴포넌트는 자식으로 Child 컴포넌트를 포함한다.

결과 보기

GrandParent component exact
Parent.jsx:5 Parent component exact
Child.jsx:4 Child component exact
Child.jsx:6 Child useEffect
Parent.jsx:7 Parent useEffect
GrandParent.jsx:6 GrandParent useEffect

콘솔의 결과는 이와같다.
useEffect부분은 Child로부터 GrandParent로 가고
기본 컴포넌트의 실행 콘솔은 GrandParent로부터 Child로 간다.

왜 이런 결과가 나올까??

useEffect의 정의에서 렌더링이 될때마다 실행된다고 한다.

즉, 천천히 생각해보면
App은 GrandParent 컴포넌트를 만나면서
해당 컴포넌트를 실행하며 콘솔을 출력하고 return문을 실행하는데
Parent 컴포넌트가 있어서
해당 컴포넌트를 실행하며 콘솔을 출력하며 return문을 실행하는데
Child 컴포넌트가 있어
해당 컴포넌트를 실행하며 콘솔을 출력하고
Child 컴포넌트 return문이 종료되므로 렌더링이 되어 Child의 useEffect가 가장 먼저 실행된다.
그후에 Child컴포넌트 과정이 끝난 Parent 컴포넌트의 return 문이 종료되며 렌더링이 되어 Parent의 useEffect가 그 다음이고
마찬가지로 GrandParent는 마지막으로 useEffect가 실행된다.