Q. useEffect의 실행 순서

❓useEffect의 실행 순서

- 리액트의 내장 hook중에 하나인 useEffect에 전달된 콜백은 컴포넌트가 mount, update, unmmount될 때 실행될 수 있음

- useEffect의 샐행은 컴포넌트의 렌더링과 동시에 일어나는게 아니라 그 후에 일어나게 됨

 

1. mount 될 때 useEffect 실행 시점

import { useEffect } from "react";

const App = () => {
  console.log("1");
  
  useEffect(() => {
	console.log("mount")
  }, []);
  console.log("2");
  
  return <div>App</div>
}

- 1 -> 2 -> mount 순으로 실행이 됨
- 컴포넌트가 실행이 될때 동시에 useEffect가 실행이 되는 것이 아니라, 컴포넌트의 렌더링이 끝난 후 useEffect가 실행됨

 

2. update unmount 될 때 useEffect 실행 시점

- useEffect에 전달하는 콜백함수도 return을 가질 수 있는데 이 return 에 함수를 전달할 수 있음
  => 이를 클린업(cleanup)함수라고 함
- 클린업함수는 컴포넌트가 unmount 될 때 실행됨

import { useEffect, useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  
  console.log("1");
  
  useEffect(() => {
  	console.log("mount")
    return () => {console.log("unmount")}
  }, [input])
  
  console.log("2")
  
  const handleChange = (e) => {
    setInput(e.target.value)
  }
  
  return (
    <div>
      <input
        value={input}
        onChange={handleChange}
       />
    </div>
  )
}

export default App;

- 컴포넌트가 처음 렌더링 될 때, 즉 mount 될 때 1, 2, mount 순으로 실행됨
- input의 state가 업데이트 되어 컴포넌트가 리렌더링 되면, 1, 2, unmount, mount 순으로 실행됨
- 컴포넌트가 재평가되면서 1, 2 가 먼저 출력되고 그다음 unmount 되면서 cleanup 함수가 실행되어 unmount를 출력하고, 그 다음 update가 되면서 mount를 출력함
=> 컴포넌트는 리렌더링 될 때, 재평가 => 언마운트 => 업데이트 순으로 진행됨

❔클린업 함수를 전달하되 의존성 배열을 지워보기

import { useEffect, useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  
  console.log("1");
  
  useEffect(() => {
  	console.log("mount")
    return () => {console.log("unmount")}
  }, [])
  
  console.log("2")
  
  const handleChange = (e) => {
    setInput(e.target.value)
  }
  
  return (
    <div>
      <input
        value={input}
        onChange={handleChange}
       />
    </div>
  )
}

export default App;

- 의존성 배열을 삭제하니 unmount가 출력되지 않음 => 클린업 함수가 실행되지 않음
- 클린업 함수가 unmount될때 실행된다고 생각하면 되고 아니면 update전에 실행된다고 생각하면 됨
 => 의존성 배열이 비어있어 update될때 useEffec가 실행되지 않는다면, 클린업 함수도 실행되지 않음

3. 컴포넌트가 중첩되어있을 때 useEffect 실행 순서

import { useEffect } from "react";

const Inner = () => {
  useEffect(() => {
    console.log("Inner Mount");
  }, []);
  return <div></div>;
}

const Outer = () => {
  useEffect(() => {
    console.log("Outer Mount");
  }, []);
  
  return (
  	<div>
      <Inner /> 
    </div>
  )
}

const App = () => {
  useEffect(() => {
    console.log("App mount");
  }, [])
  
  return (
    <div>
      <Outer /> 
    </div>
  )
}

export default App;

- Inner -> Outer -> App 순서대로 실행됨
- 자식컴포넌트 -> 부모컴포넌트 순으로 useEffect가 실행됨

4. 자식 컴포넌트가 나란히 있을 때 useEffect 실행 순서

import { useEffect } from "react";

const One = () => {
  useEffect(() => {
    console.log("One Mount");
  }, []);
  return <div></div>;
};

const Two = () => {
  useEffect(() => {
    console.log("Two Mount");
  }, []);
  return <div></div>;
};

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

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

export default App;

- One -> Two -> App 컴포넌트 순으로 useEffect가 실행됨
- One의 렌더링이 끝나야 실행 컨텍스트가 App 컴ㅍ포넌트로 돌아오고 그 후 함수 Two가 실행 되어 Two 함수의 실행 컨텍스트가 생성되고 평가됨

❓ 정리

1. 렌더링 단계
먼저, React는 해당 컴포넌트의 렌더링을 시작하는데 이때 컴포넌트의 JSX를 계산하고, 이를 바탕으로 DOM을 업데이트함

2. useEffect 훅 등록
렌도링 고정에서 React는 useEffect 훅을 발견하면, 그 훅을 등록하는데 이때, 등록하는 것은 실제 side effect 함수 그 자체가 아니라, 그 함수를 나중에 실행할 수 있도록 하는 스케줄링임

3. 화면 업데이트
모든 렌더링 작업이 완료되면, React는 변경된 내용을 화면에 반영함

4. useEffect 실행
화면 업데이트 이후, React는 등록된 useEffect 함수를 실행하는 시점에서 side effect는 비동기적으로 실행되며, 어떠한 데이터를 가져오거나 다른 비동기 작업을 수행할 수 있음

5. cleanup 함수 실행(있다면)
useEffect 훅의 두 번째 인자가 변경되어서 훅이 다시 실행되기 전에 이전에 실행했던 useEffect의 cleanup 함수가 실행됨
cleanup 함수는 useEffect 훅에 전달되는 함수가 반환하는 함수
이는 보통 생성된 side effects를 정리하는 데 사용하는데 만약 훅이 처음 실행되는 경우, cleanup 함수는 실행되지 않음

이 과정을 반복하면서 컴포넌트는 React의 상태 업데이트와 side effects를 동시에 관리하게 됨
useEffect 훅의 두 번째 인자는 훅의 실행을 제어하는데 사용되며, 이 인자가 변경될 때마다 useEffect는 다시 실행됨
이때, 두 번째 인자를 빈 배열 '[]'로 설정하면 훅은 컴포넌트가 마운트될 때 한번만 실행됨

useEffect는 React에서 side effects를 처리하는 데 사용되는 훅입니다. 그 실행 순서는 다음과 같습니다.
첫 번째, React는 해당 컴포넌트를 렌더링합니다. 이 단계에서 JSX가 계산되고, 이를 바탕으로 DOM이 업데이트됩니다. 렌더링 과정에서 React는 useEffect 훅을 만나게 되면, 그 훅을 '등록'하는데, 이는 실제 side effect 함수를 즉시 실행하는 것이 아니라, 나중에 실행할 수 있도록 준비하는 과정입니다.
렌더링 작업이 모두 완료되면, React는 변경사항을 화면에 반영하고, 이후에 등록된 useEffect 함수를 실행합니다. 이 훅에서 비동기 작업이 이루어지곤 합니다, 예를 들어 데이터를 가져오는 작업 등이 이에 해당합니다.
또한 useEffect는 cleanup 함수라는 것을 가질 수 있습니다. 이 cleanup 함수는 side effect 함수가 반환하는 함수로, 이전 useEffect가 생성한 side effects를 정리하는 데 사용됩니다. 만약 useEffect 훅의 두 번째 인자가 변경되어서 훅이 다시 실행될 예정이라면, 새로운 훅 실행 전에 이 cleanup 함수가 먼저 실행됩니다.
마지막으로, useEffect 훅의 실행 여부는 두 번째 인자에 의해 제어됩니다. 이 인자가 변경될 때마다 훅은 다시 실행되는데, 만약 이를 빈 배열 []로 설정하면, 훅은 컴포넌트가 마운트될 때 한 번만 실행됩니다