리액트 useEffect hook 실행 순서

1. 두번째 인자로 아무 값도 없는 경우

useEffect(() => {
  ....
})

렌더링이 된 후 마다 실행된다.

 

 

2. 두번째 인자가 빈 배열 '[ ]' 인 경우

useEffect(() => {
  ....
}, [])

첫 렌더링 후에만 실행되고, 두번째 렌더링부터는 아무리 렌더링이 많이 일어나도 실행되지 않는다.

 

 

3. 두번째 인자가 특정 변수의 배열인 경우

useEffect(() => {
  ....
}, [state1, state2])

첫 렌더링 후에 한 번 실행되고, state1 또는 state2 가 변할 때 마다 실행된다.

 

 

4. 렌더링 이후에 실행된다는 것은 무슨 말인가?

import "./App.css";

import { useState, useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("top");
  });

  console.log("mid");

  return (
    <div className="App">
      <h1>bot</h1>
    </div>
  );
}

export default App;

표시되는 순서 'mid' => 'bot' => 'top' 이다