useEffect가 뭘까?

📖 useEffect

💬 정의

• 컴포넌트가 렌더링이 진행된 후 특정 작업을 실행할 수 있도록 하는 hook
• 의존성 배열을 넣으면 배열의 값이 변동 될 때도 실행된다

💬 실행 순서

• 가정사항 : App > OuterBox > InnerBox

function App() {
  useEffect(() => {
    console.log(1);
  }, []);
  return (
    <div className="App">
      <h1>useEffect 순서 테스트</h1>
      <OuterBox />
    </div>
  );
}

const OuterBox = () => {
  useEffect(() => {
    console.log(2);
  }, []);
  return (
    <>
      <h2>Outer BOX</h2>
      <InnerBox />
    </>
  );
};

const InnerBox = () => {
useEffect(() => {
    console.log(3);
  }, []);
  return <h2>Inner Box</h2>
};

• 콘솔 출력 순서 : 3 > 2 > 1
• 사유 : App이 렌더링 되기 위해서는 OuterBox가 렌더링 되어야하고
  OuterBox가 렌더링 되기 위해서는 InnerBox가 렌더링 되어야하기에 당연함

💬 예외 순서

• React v18부터 지원하는 Suspense 기능을 이용하면 예외를 만들 수 있다
• 가정사항 : App > OuterBox > InnerBox

function App() {
  useEffect(() => {
    console.log(1);
  }, []);
  return (
    <div className="App">
      <h1>useEffect 순서 테스트</h1>
      <OuterBox />
    </div>
  );
}

const OuterBox = () => {
  useEffect(() => {
    console.log(2);
  }, []);
  return (
    <>
      <h2>Outer BOX</h2>
      <Suspense fallback={<div>...loading</div>}>
      	<InnerBox />
      </Suspense>
    </>
  );
};

const InnerBox = () => {
const asyncResult = axios.get(URL)

useEffect(() => {
    console.log(3);
  }, []);
  return <h2>Inner Box</h2>
};

• 콘솔 출력 순서 : 2 > 1 > 3
• 사유 : OuterBox까지 렌더링이 된 이후 InnerBox는 Suspense에 의해 비동기 통신이
  완료될 때 까지 interrupt을 당하기 때문에 가장 나중에 3출력된다

💡 답변

useEffect의 실행 순서에 대해 설명해주세요

useEffect는 기본적으로 컴포넌트가 렌더링된 후에 실행됩니다.
App 컴포넌트 안에 Outer 컴포넌트가 있고 Outer안에 Inner라는 컴포넌트가 있다고하면
Inner의 useEffect부터 실행되며 그 다음으로 Outer, App 순으로 useEffect가
실행됩니다. 예외적으로 컴포넌트에 있는 비동기 통신을 제어하기위해 React v18부터
정식 지원하는 Suspense를 사용하면 Suspense안에 있는 컴포넌트의 useEffect가
가장 나중에 실행됩니다.