클래스 기반 컴포넌트의 생명주기 메서드

👉🏻 constructor(props)

• 컴포넌트가 생성될 때 호출
• 초기 상태를 설정하거나 메서드를 바인딩하는 등 초기화 작업 수행

👉🏻 getDerivedStateFromProps(nextProps, prevState)

• props로부터 상태를 동기화하는 목적으로 사용
• 컴포넌트가 마운트될 때와 업데이트될 때 호출

👉🏻 render()

• 실제 UI를 렌더링하는 역할
• render 메서드에서 반환된 JSX가 화면에 표시됨

👉🏻 getSnapshotBeforeUpdate(prevProps, prevState)

• 최근에 렌더링된 결과가 DOM에 반영되기 직전에 호출됨
• 주로 스크롤 위치나 기타 DOM 정보를 가져오는 데 사용

👉🏻 componentDidMount()

• 컴포넌트가 화면에 나타난 후 호출됨
• 외부 데이터를 가져오거나 DOM 조작과 같은 부수 효과를 수행하는 데 사용

👉🏻 shouldComponentUpdate(nextProps, nextState)

• 컴포넌트의 리렌더링을 결정
• true를 반환하면 리렌더링이 허용되고, false를 반환하면 리렌더링이 방지됨

👉🏻 componentDidUpdate(prevProps, prevState, snapshot)

• 컴포넌트가 업데이트된 후에 호출됨
• 이전 props 또는 state에 기반하여 추가적인 동작을 수행할 수 있음

👉🏻 componentWillUnmount()

• 컴포넌트가 제거되기 직전에 호출됨
• 리소스 해제 또는 타이머 제거와 같은 정리 작업을 수행하는 데 사용

함수형 컴포넌트에서의 생명주기

함수형 컴포넌트에서는 useEffect 훅을 사용해 생명주기와 관련된 작업을 수행함

import { useEffect } from 'react';

function FunctionalComponent() {
  // componentDidMount와 componentDidUpdate 역할
  useEffect(() => {
    // Effect 내용
    return () => {
      // componentWillUnmount 역할
    };
  }, [/* 의존성 배열 */]);

  return (
    // JSX 내용
  );
}

위 코드에서 useEffect의 콜백 함수는 컴포넌트가 마운트되거나 업데이트될 때 호출되는데, 의존성 배열에 지정된 상태나 프롭스가 변경될 때만 콜백이 실행되며, 정리 함수를 반환하여 컴포넌트가 제거될 때 정리 작업을 수행할 수 있음