Lifecycle

Lifecycle Methods (생명주기 메서드)

컴포넌트의 생명주기 동안 특정 시점에 실행되는 메서드

Mounting

메소드	설명
constructor(props)	컴포넌트를 초기화하고 초기 상태를 설정합니다.
getDerivedStateFromProps()	프롭스의 변경에 따라 상태를 업데이트하는 데 사용됩니다.
render()	현재 상태와 프롭스에 기반하여 컴포넌트 UI를 렌더링합니다.
componentDidMount()	컴포넌트가 DOM에 마운트된 후에 호출됩니다.

Updating

메소드	설명
getDerivedStateFromProps()	프롭스의 변경에 따라 상태를 업데이트하는 데 사용됩니다.
shouldComponentUpdate()	컴포넌트가 리렌더링해야 하는지 여부를 결정합니다.
render()	현재 상태와 프롭스에 기반하여 컴포넌트 UI를 렌더링합니다.
getSnapshotBeforeUpdate()	DOM이 업데이트되기 전에 정보를 캡처합니다.
componentDidUpdate()	컴포넌트가 DOM에서 업데이트된 후에 호출됩니다.

Unmounting

메소드	설명
componentWillUnmount()	컴포넌트가 마운트 해제되고 소멸되기 직전에 호출됩니다.

컴포넌트 생명주기 (Lifecycle)

React 컴포넌트를 모니터하고 조작할 수 있는 3가지 주요 단계

Mounting

: 컴포넌트의 인스턴스가 DOM 에 삽입되는 단계

Updating

: 컴포넌트가 변경되는 단계

Unmounting

: 컴포넌트가 DOM 에서 제거되는 단계

Mounting

•

constructor(props)

•

getDerivedStateFromProps()

•

render()

•

componentDidMount()

constructor(props)

•

컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 처음으로 호출됩니다.

•

props를 인자로 받아 super(props)로 부모 클래스의 생성자를 호출합니다.

•

주로 초기 상태의 설정과 이벤트 핸들러 바인딩이 이루어집니다.

getDerivedStateFromProps()

•

Mounting 단계에서, 컴포넌트가 생성되고 render 메서드가 호출되기 전에 실행됩니다.

•

props와 state를 인자로 받아 새로운 상태를 반환합니다.

•

일반적으로 props에 의존적인 초기 상태를 설정하는 데 사용됩니다.

render()

•

render 메서드는 컴포넌트의 UI를 정의하고, React 엘리먼트를 반환합니다.

•

render 메서드의 실행 결과가 실제 DOM에 렌더링되기 전에 getDerivedStateFromProps와 함께 호출됩니다.

componentDidMount()

•

컴포넌트가 DOM에 삽입된 후에 호출됩니다.

•

주로 네트워크 요청, 초기 데이터 로딩 등의 부수 효과를 수행하는 데 사용됩니다.

•

이 단계에서 상태를 업데이트하면 컴포넌트가 다시 렌더링되어 UI가 갱신됩니다.

Updating

•

getDerivedStateFromProps()

•

shouldComponentUpdate()

•

render()

•

getSnapshotBeforeUpdate()

•

componentDidUpdate()

getDerivedStateFromProps()

•

Updating 단계에서, 컴포넌트가 업데이트되고 render 메서드가 호출되기 전에 실행됩니다.

•

props와 state를 인자로 받아 새로운 상태를 반환합니다.

•

주로 props에 의존하는 상태를 업데이트하는 데 사용됩니다.

shouldComponentUpdate()

•

컴포넌트가 리렌더링을 결정하기 전에 호출됩니다.

•

true를 반환하면 리렌더링이 발생하고, false를 반환하면 리렌더링이 방지됩니다.

•

성능 최적화를 위해 사용될 수 있습니다.

render()

•

render 메서드는 컴포넌트의 UI를 정의하고, React 엘리먼트를 반환합니다.

•

업데이트가 발생할 때마다 호출되어 UI를 갱신합니다.

getSnapshotBeforeUpdate()

•

render 메서드 호출 이후, 실제로 DOM에 커밋되기 전에 호출됩니다.

•

주로 업데이트 전의 DOM 상태를 기반으로 작업을 수행하고 싶을 때 사용됩니다.

componentDidUpdate()

•

컴포넌트가 업데이트를 완료한 후에 호출됩니다.

•

이 단계에서 이전 props 및 state와 최신 props 및 state에 접근할 수 있습니다.

•

주로 업데이트 이후의 작업을 수행하는 데 사용됩니다.

Unmounting

•

componentWillUnmout()

componentWillUnmout()

•

컴포넌트가 DOM에서 제거되기 전에 호출됩니다.

•

이 메서드 내에서는 리소스 해제나 이벤트 리스너 제거 등의 정리 작업을 수행할 수 있습니다.

•

주로 컴포넌트의 정리 작업을 위해 사용됩니다.

예시코드

import React, { Component } from 'react';

class LifecycleClass extends Component {
  constructor(props) {
    super(props);
    console.log('constructor: 컴포넌트가 생성 중입니다.');
    
    this.state = {
      data: null,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('getDerivedStateFromProps: nextProps와 prevState를 받습니다. 상태를 업데이트하려면 객체를 반환하고, 그렇지 않으면 null을 반환합니다.');
    return null;
  }

  componentDidMount() {
    console.log('componentDidMount: 컴포넌트가 DOM에 마운트되었습니다.');
    // 비동기 작업, 데이터 가져오기 등을 수행합니다.
    this.fetchData();
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate: 컴포넌트가 다시 렌더링되기 전에 호출됩니다. 불리언 값을 반환합니다.');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate: 가상 DOM에서 실제 DOM으로 변경 사항이 반영되기 전에 호출됩니다.');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate: 컴포넌트가 DOM에서 업데이트된 후에 호출됩니다.');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출됩니다.');
  }

  fetchData() {
    // 비동기 작업을 시뮬레이션합니다.
    setTimeout(() => {
      console.log('데이터를 성공적으로 가져왔습니다!');
      this.setState({ data: '가져온 데이터' });
    }, 2000);
  }

  render() {
    console.log('render: 컴포넌트를 렌더링 중입니다.');
    return (
      <div>
        <h1>컴포넌트 생명주기 예제</h1>
        <p>데이터: {this.state.data}</p>
      </div>
    );
  }
}

export default LifecycleClass;
JavaScript
복사

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

const LifecycleFunction = (props) => {
  // constructor 대신 useState로 상태 초기화
  console.log('constructor: 컴포넌트가 생성 중입니다.');
  const [data, setData] = useState(null);
  const [count, setCount] = useState(0);
  const [otherValue, setOtherValue] = useState(0);
  
  // useMemo - 성능 최적화를 위한 메모이제이션 훅
  // - 첫 번째 인자: 메모이제이션할 값을 계산하는 함수
  // - 두 번째 인자: 의존성 배열 - 배열 내 값이 변경될 때만 재계산
  // - 의존성 배열의 값이 변하지 않으면 이전에 계산된 값을 재사용
  // - 복잡하거나 비용이 많이 드는 계산을 최적화할 때 사용
  // - 렌더링마다 실행되지 않아 불필요한 계산을 방지
  // 메모이제이션이란?
  // : 계산된 결과를 저장하여 동일한 입력에 대해 다시 계산하지 않고 저장된 결과를 반환하는 최적화 기법
  const expensiveCalculation = useMemo(() => {
    console.log('useMemo: 복잡한 계산을 수행 중...');
    // 복잡한 계산을 시뮬레이션 (count가 변경될 때만 실행)
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += count;
    }
    return result;
  }, [count]); // count가 변경될 때만 재계산, otherValue가 변해도 재계산 안 함
  
  // getDerivedStateFromProps - 렌더링 중에 처리
  console.log('getDerivedStateFromProps: nextProps와 prevState를 받습니다. 상태를 업데이트하려면 객체를 반환하고, 그렇지 않으면 null을 반환합니다.');
  
  // 이전 상태를 추적하기 위한 ref (componentDidUpdate용)
  const prevDataRef = useRef();
  
  // getSnapshotBeforeUpdate 대체 - DOM 업데이트 전 값 저장
  useEffect(() => {
    console.log('getSnapshotBeforeUpdate: 가상 DOM에서 실제 DOM으로 변경 사항이 반영되기 전에 호출됩니다.');
    prevDataRef.current = data;
  });
  
  // componentDidMount - 마운트 시 한 번만 실행
  useEffect(() => {
    console.log('componentDidMount: 컴포넌트가 DOM에 마운트되었습니다.');
    // 비동기 작업, 데이터 가져오기 등을 수행합니다.
    fetchData();
    
    // componentWillUnmount - cleanup 함수
    return () => {
      console.log('componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출됩니다.');
    };
  }, []); // 빈 배열: 마운트/언마운트 시에만 실행
  
  // componentDidUpdate - data가 변경될 때마다 실행
  useEffect(() => {
    if (prevDataRef.current !== undefined) {
      console.log('componentDidUpdate: 컴포넌트가 DOM에서 업데이트된 후에 호출됩니다.');
    }
  }, [data]);
  
  // shouldComponentUpdate - React.memo로 대체 가능 (컴포넌트 외부에서)
  console.log('shouldComponentUpdate: 컴포넌트가 다시 렌더링되기 전에 호출됩니다. 불리언 값을 반환합니다.');
  
  const fetchData = () => {
    // 비동기 작업을 시뮬레이션합니다.
    setTimeout(() => {
      console.log('데이터를 성공적으로 가져왔습니다!');
      setData('가져온 데이터');
    }, 2000);
  };
  
  // render
  console.log('render: 컴포넌트를 렌더링 중입니다.');
  return (
    <div>
      <h1>컴포넌트 생명주기 예제</h1>
      <p>데이터: {data}</p>
      
      <hr />
      
      <h2>useMemo 예제</h2>
      <p>Count: {count}</p>
      <p>계산된 값 (useMemo): {expensiveCalculation}</p>
      <p>다른 값: {otherValue}</p>
      
      <button onClick={() => setCount(count + 1)}>
        Count 증가 (useMemo 재계산)
      </button>
      <button onClick={() => setOtherValue(otherValue + 1)}>
        다른 값 증가 (useMemo 재계산 안 함)
      </button>
      
      <p style={{ fontSize: '12px', color: '#666', marginTop: '10px' }}>
        💡 "다른 값 증가" 버튼을 클릭해도 useMemo는 재계산되지 않습니다. (콘솔 확인)
      </p>
    </div>
  );
};

export default LifecycleFunction;
JavaScript
복사