[React] Mount, Update, Unmount

 

 

 

[React] Mount, Update, Unmount

 

 

 

 

 

React 컴포넌트의 라이프사이클은 컴포넌트가 마운트(mount)될 때, 업데이트(update)될 때, 그리고 언마운트(unmount)될 때 각각의 단계에서 발생하는 일련의 과정입니다.

이 과정들을 이해하면 React 컴포넌트의 동작을 더 잘 파악할 수 있습니다.

 

 

컴포넌트 마운트 (Mount)

 

컴포넌트가 처음으로 DOM에 삽입될 때, 다음과 같은 순서로 작업이 진행됩니다:

1. Run lazy initializers:
   • 초기 상태나 값들을 설정하는 단계입니다. 이 시점에 컴포넌트는 초기값을 설정하고 초기 상태를 결정합니다.
2. Render:
   • 컴포넌트들을 트리로만들어서 이를 토대로 랜더링합니다.
   • React는 JSX를 바탕으로 가상 DOM을 생성합니다. 이는 실제 DOM이 아닌 메모리 상의 DOM 구조입니다.
   • snapshot 을 찍고 virtualDom을 만듭니다.
   • 이후에 업데이트될때 이 virtualDom을 비교하여 브라우저 업데이트하는데 사용합니다.
3. React updates the DOM:
   • 가상 DOM이 실제 DOM으로 변환되고, 이 과정에서 실제 HTML 요소들이 생성되어 브라우저의 DOM에 추가됩니다.
4. Browser paints screen:
   • 브라우저가 실제 화면에 새로 추가된 DOM 요소들을 그립니다.
5. Run effects:
   • useEffect와 같은 훅에 의해 정의된 사이드 이펙트가 실행됩니다. 예를 들어, 데이터 페칭, 타이머 설정, 구독 등이 여기에 해당합니다.

 

 

컴포넌트 업데이트 (Update)

컴포넌트가 새로운 props나 상태 변경에 의해 업데이트될 때, 다음과 같은 순서로 작업이 진행됩니다:

1. Render:
   • 새로운 props와 상태를 반영하여 가상 DOM을 다시 생성합니다.
2. React updates the DOM:
   • 가상 DOM과 실제 DOM을 비교하여 변경된 부분만 실제 DOM에 업데이트합니다. 이를 "재조정(reconciliation)"이라고 합니다.
3. Browser paints screen:
   • 브라우저가 변경된 부분을 다시 그려서 화면에 반영합니다.
4. Cleanup effects:
   • 이전 렌더링에서 설정된 사이드 이펙트를 정리합니다. 예를 들어, useEffect의 클린업 함수가 호출됩니다.
5. Run effects:
   • 새로운 사이드 이펙트를 실행합니다. 상태나 props가 변경되었기 때문에, 새로운 값들을 바탕으로 사이드 이펙트가 실행됩니다.

 

 

 

컴포넌트 언마운트 (Unmount)

컴포넌트가 DOM에서 제거될 때, 다음과 같은 순서로 작업이 진행됩니다:

1. Cleanup effects:
   • 컴포넌트가 제거되기 전에 모든 사이드 이펙트를 정리합니다. 예를 들어, 구독 해제, 타이머 정리 등을 수행합니다.

 

 

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

function MyComponent({ prop }) {
  // 초기 상태 설정
  const [count, setCount] = useState(0);

  // useEffect: 컴포넌트가 마운트될 때와 업데이트될 때 실행
  useEffect(() => {
    console.log('Effect ran');
    // 사이드 이펙트 설정 (예: 타이머)
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 클린업 함수: 컴포넌트가 업데이트되기 전에 또는 언마운트될 때 실행
    return () => {
      console.log('Cleanup ran');
      clearInterval(timer);
    };
  }, [prop]); // prop이 변경될 때마다 이펙트 재실행

  return (
    <div>
      <p>{count}</p>
    </div>
  );
}

export default MyComponent;

 

 

1. Mount:
   • MyComponent가 처음으로 렌더링될 때, run lazy intializers를 통해 useState는 count를 0으로 초기화합니다.
   • 이후 jsx코드를 바탕으로 virtual dom을 랜딩하고 랜딩 후, 브라우저의 dom에 업데이트합니다. 그러면 브라우저는 brower paint screen을해서 화면에 보이게 됩니다.
   • 화면이 보인 후, useEffect가 실행되어 타이머를 설정하고, 1초마다 count를 증가시킵니다.
   • 즉, React는 가상 DOM을 생성하고, 실제 DOM에 반영하여 브라우저가 이를 그립니다.
2. Update:
   • prop이 변경되거나 count가 증가할 때마다 컴포넌트가 다시 렌더링됩니다. (부모 컴포넌트라 랜더링하거나, 상태가 변하거나, context가 변하거나 할때 리랜더링)
   • 랜더링을 합니다. => 새로운 가상 DOM이 생성되고 실제dom과 비교해서 차이를, 실제 DOM에 업데이트 합니다. 이를 conciliation이라고 합니다.
   • 이전 useEffect의 클린업 함수가 실행되어 이전 타이머를 정리하고, 새로운 타이머가 설정됩니다.(useEffect실행)
3. Unmount:
   • MyComponent가 DOM에서 제거되기 전에 useEffect의 클린업 함수가 실행되어 타이머를 정리합니다.

 

 

요약

• Mount: 컴포넌트가 처음 DOM에 삽입될 때 초기 상태 설정, 가상 DOM 생성, 실제 DOM 업데이트, 브라우저 렌더링, 사이드 이펙트 실행.
• Update: 상태나 props 변경으로 인한 재렌더링, 가상 DOM 비교 및 실제 DOM 업데이트, 브라우저 렌더링, 이전 사이드 이펙트 정리 및 새로운 사이드 이펙트 실행.
• Unmount: 컴포넌트가 DOM에서 제거되기 전에 모든 사이드 이펙트 정리.