React 컴포넌트의 라이프 사이클은 컴포넌트의 생성, 업데이트, 제거 과정에서 일어나는 일련의 단계를 의미한다. class형 컴포넌트는 생명주기 메소드를 이용하여 컴포넌트가 특정 시점에 어떤 동작을 수행하는지를 정의하고, 이를 활용하여 컴포넌트의 동작을 조절할 수 있다. 하지만 함수형 컴포넌트가 코드를 더 간결하고 가독성 있게 작성할 수 있는 장점이 있어 현재 class형 컴포넌트보다 더 널리 사용되고 있다. 함수형 컴포넌트에서는 class형 컴포넌트의 생명주기 메소드를 직접 사용할 수 없지만, useEffect 훅을 활용하여 컴포넌트의 생명주기와 관련된 작업을 처리할 수 있다. 간결함과 가독성을 유지하면서도 컴포넌트의 동작을 세밀하게 다룰 수 있는 함수형 컴포넌트의 라이프 사이클에 대해 알아보자.

라이프 사이클 단계

1. 마운트

마운트 단계는 컴포넌트가 처음으로 생성될 때 발생한다. 이 단계에서 컴포넌트의 초기화 작업을 수행하거나 외부 데이터를 가져와 초기 상태를 설정하는 등의 작업을 한다.

2. 업데이트

업데이트 단계는 컴포넌트가 새로운 props나 state를 받아 갱신될 때 발생한다. 이 단계에서는 컴포넌트의 상태 변화에 따른 UI 업데이트 작업을 처리한다. 예를 들어, 버튼을 클릭하거나 어떤 데이터를 가져와서 컴포넌트가 다시 렌더링되는 경우가 이에 해당된다.

3. 언마운트

언마운트 단계는 컴포넌트가 제거되기 전에 발생한다. 이 단계에서는 컴포넌트 내부의 정리 작업이나 리소스 해제 등을 수행한다. 언마운트는 컴포넌트가 더 이상 필요하지 않을 때 발생하며, 화면에서 사라지거나 더 이상 사용되지 않을 때의 작업을 처리하는 단계이다.

함수형 컴포넌트에서 useEffect를 이용한 라이프 사이클의 순서를 예제 코드를 통해 살펴보도록 하자.

import { useState, useEffect } from "react";

function ComponentLifecycleExample(): JSX.Element {
  // 1번째 실행 (콘솔 출력, state 초기화)
  console.log("컴포넌트 내부 코드를 실행합니다.");
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    // 3번째 실행
    console.log("컴포넌트가 렌더링 또는 업데이트 되었습니다.");
    return () => {
      // 4번째 실행
      console.log("컴포넌트가 언마운트되기 전에 호출됩니다.");
    };
  }, [count]);

  return (
    <>
      {/* 2번째 실행 (렌더링) */}
      <p>Count: {count}</p>
      <button
        onClick={() =>
          setCount((prev) => {
            return prev + 1;
          })
        }
      >
        증가
      </button>
    </>
  );
}

export default ComponentLifecycleExample;

(위 예제 코드에서 count 상태가 변경되면 리렌더링이 일어나기 전에 useEffect의 return문 안의 코드가 실행이 된다. useEffect의 return문 안의 코드는 의존성 배열이 바뀌거나, 컴포넌트가 언마운트 될때의 두 경우 모두 실행된다.)

useEffect

함수형 컴포넌트의 라이프 사이클에서 useEffect 훅의 개념이 쓰인다는 것을 알게 되었다. useEffect 훅은 두개의 인자를 받는다. 첫 번째 인자는 useEffect훅이 실행할 콜백 함수이고, 두번째 인자는 콜백함수가 실행되는 조건을 지정해주는 의존성 배열이다. 이 의존성배열은 크게 세 가지 경우로 설명할 수 있으며, 각각의 세 가지 경우에 따라 useEffect의 콜백 함수가 실행되는 조건이 달라지게 된다. 이번에는 useEffect 훅에 대해 알아보자.

1. 의존성 배열이 없는 경우

  useEffect(() => {
    // 원하는 콜백 함수의 기능을 완성시켜주세요...
  });

컴포넌트가 렌더링 될때마다 실행된다. 효율적이지 못하기 때문에 일반적인 경우에서 많이 사용되는 방법은 아니다.

2. 의존성 배열이 빈 배열일 경우

  useEffect(() => {
    // 원하는 콜백 함수의 기능을 완성시켜주세요...
  }, []);

컴포넌트가 처음 렌더링 될 때에만 실행된다. 컴포넌트 내부의 state 값이 변해서 컴포넌트가 다시 실행 돼 리렌더링이 발생하더라도 실행되지 않는다.

3. 의존성 배열에 값이 있는 경우

  useEffect(() => {
    // 원하는 콜백 함수의 기능을 완성시켜주세요...
  }, [state]);

컴포넌트가 처음 렌더링 될 때와, 의존성 배열의 값으로 넣어준 state가 업데이트 될 때마다 실행된다.