리액트 함수 컴포넌트의 생명 주기란?

리액트에서 컴포넌트는 생명 주기를 갖습니다.

생명 주기란 컴포넌트가 생성되고 사용되고, 소멸되는 과정을 뜻합니다.

 

함수 컴포넌트에서 생명 주기는 크게 3가지 단계로 구분할 수 있습니다.

1. 렌더 (Render)
2. 커밋 (Commit)
3. 클린업 (Cleanup)

이 세 단계를 각각 설명하자면 다음과 같습니다.

1. 렌더
   • 함수 컴포넌트가 호출되어 JSX가 반환됨.
   • side effect가 호출되지 않음.
2. 커밋
   • 실제 DOM에 변화가 적용되는 단계.
   • useEffect가 호출되는 단계.
3. 클린업
   
   • 컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전 정리 작업을 수행하는 단계.
   • useEffect의 cleanup이 호출되는 단계.

 

이 단계를 간단히 아래의 코드로 살펴볼 수 있습니다.

import React from 'react';

function Component() {
  React.useEffect(() => {
    // 커밋 단계: side effect 발생
    console.log('Component mounted or updated');

    // 클린업 단계: 컴포넌트 언마운트 시 실행
    return () => {
      console.log('Component unmounted or before update');
    };
  }, []);

  // 렌더 단계: JSX 반환
  return <div>Component</div>;
}