[React] React 라이프 사이클 이해하기 + useEffect의 동작 순서

React의 렌더링이란?

React 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다. 만약 컴포넌트가 props와 state와 같은 상태값을 가지고 있지 않다면 오직 해당 컴포넌트가 반환하는 JSX 값에 기반해 렌더링이 일어난다.

 

쉽게 말해, 브라우저 화면에 요소를 보여주는 것을 렌더링이라고 한다.

React의 컴포넌트들은 모두 이 생명주기를 가지고 있다.

 

렌더링 과정

• mount : 처음 화면에 보여주는 최초 렌더링이다.
• update : 화면의 요소 하나라도 바뀌면 업데이트 된 것이다. ex) 0 -> 1로 변경
• unmount : 보여줄 필요가 없어 화면에서 삭제하는 것

 

이걸 왜 알아야 되냐! -> 컴포넌트가 mount, update, unmount되는 순간을 조작하고 싶기 때문! 

useEffect로 활용할 수 있다.

useEffect는 React 17버전 전후로 동작 방식의 차이가 있다.

 

React 17버전 전후의 useEffect의 동작 순서

React 17 이전 (React 16)

기존의 useEffect 동작 순서는 다음과 같다.

1. Cleanup 함수 실행
2. 화면 업데이트
3. 새로운 Effect 콜백 실행

즉, 화면이 업데이트되기 전에 이전 Effect의 cleanup 함수가 먼저 실행된다. 화면에 반영되기 전의 정리 단계가 선행되었다.

 

React 17 이후

React 17부터는 이 순서가 다음과 같이 변경됐다.

1. 화면 업데이트(먼저 반영됨)
2. Cleanup 함수 실행
3. 새로운 Effect 콜백 실행 

즉, 화면이 먼저 업데이트된 후에 cleanup 함수와 새로운 Effect 콜백이 실행된다.

---

Cleanup 함수와 비동기 실행

useEffect의 cleanup 함수는 동기적으로 실행되지만, 새로운 Effect의 콜백 함수는 cleanup 함수가 끝나는 동안 비동기적으로 준비되어 실행된다. 즉, cleanup이 끝날 때까지 기다리지 않고 동시에 준비된다. 이 내용이 아래의 서적 내용에 해당하는 것 같다.

useEffect 클린업 함수의 비동기 실행

리액트 16까지는 useEffect에 있는 클린업 함수가 동기적으로 처리됐다. 
클린업 함수가 완료되기 전까지는 다른 작업을 방해해 불필요한 성능 저하로 이어지는 문제가 있었다. 
버전 17에서부터는 화면이 완전히 업데이트된 이후에 클린업 함수가 비동기적으로 실행된다.

출처: 모던리액트 Deep Dive 10장 내용 중

 

Unmount 시의 동작

컴포넌트가 Unmount될 때는:

1. Cleanup 함수 실행
2. 컴포넌트가 Unmount

이때는 더 이상 새로운 Effect 콜백이 실행되지 않고, 정리 후 바로 컴포넌트가 사라진다.

---

예제를 통해 정리해보면,

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Effect 콜백 실행 🚀");

    return () => {
      console.log("Cleanup 함수 실행 🧹");
    };
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

export default ExampleComponent;

 

React 16 동작 흐름 (이전 버전)

1. count가 0 → 1로 변경 (버튼 클릭)

• Cleanup 실행: "Cleanup 함수 실행 🧹"
• 화면 업데이트 준비
• Effect 콜백 실행: "Effect 콜백 실행 🚀"

이때 화면은 count: 1로 업데이트되기 전에 cleanup 함수가 실행된 후 반영된다.

 

React 17 동작 흐름 (현재 버전)

1. count가 0 → 1로 변경 (버튼 클릭)

• 화면 업데이트: count: 1로 먼저 업데이트됨
• Cleanup 실행: "Cleanup 함수 실행 🧹"
• Effect 콜백 실행: "Effect 콜백 실행 🚀"

React 17에서는 화면이 먼저 업데이트된 후 cleanup과 새로운 effect 콜백이 차례로 실행된다.

 

Unmount 시의 동작

예를 들어 컴포넌트가 사라지면:

1. Unmount 시점:

• Cleanup 실행: "Cleanup 함수 실행 🧹"
• 컴포넌트가 완전히 Unmount됨

Effect 콜백은 실행되지 않는다.