React Component Lifecycle을 이해하는 방법

React에서 컴포넌트의 생명주기는 컴포넌트가 생성되고, 업데이트되며, 마침내 사라지는 과정을 말합니다. 이 과정을 이해하는 것은 웹 개발에서 중요한 부분입니다. 여기서는 복잡한 용어를 사용하지 않고 React 컴포넌트 생명주기의 주요 단계를 살펴보겠습니다.

컴포넌트 생성(Mounting)

컴포넌트가 화면에 나타나기 시작하는 단계입니다. 이 단계에는 주로 세 가지 주요 함수가 있습니다:

1. constructor(): 컴포넌트가 생성될 때 가장 먼저 호출되는 함수입니다. 여기서 초기 상태를 설정할 수 있습니다.

2. render(): 컴포넌트의 UI를 그리는 함수입니다. 이 함수는 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 호출됩니다.

3. componentDidMount(): 컴포넌트가 화면에 나타난 직후에 호출되는 함수입니다. 여기서 데이터 요청 같은 외부 API 호출을 할 수 있습니다.

컴포넌트 업데이트(Updating)

컴포넌트의 상태나 속성이 변경될 때 발생하는 단계입니다. 이 단계는 다음 함수들로 구성됩니다:

1. shouldComponentUpdate(): 컴포넌트가 업데이트 되어야 할지 말아야 할지 결정하는 함수입니다. 이 함수는 성능 최적화에 유용합니다.

2. render(): 상태나 속성의 변경에 따라 컴포넌트의 UI를 다시 그립니다.

3. componentDidUpdate(): 컴포넌트의 업데이트가 화면에 반영된 직후에 호출됩니다. 여기서 업데이트에 따른 후속 처리를 할 수 있습니다.

컴포넌트 제거(Unmounting)

컴포넌트가 더 이상 필요하지 않아 화면에서 사라지는 단계입니다. 이 단계에서는 주로 componentWillUnmount() 함수가 사용됩니다. 이 함수는 컴포넌트가 제거되기 직전에 호출되며, 여기서 필요한 정리 작업을 수행할 수 있습니다.

예제 코드

React 컴포넌트 생명주기를 이해하기 위한 간단한 예제 코드를 살펴보겠습니다:

import React, { Component } from 'react';

class LifecycleExample extends Component {
  constructor(props) {
    super(props);
    console.log('constructor');
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          증가
        </button>
      </div>
    );
  }
}

export default LifecycleExample;

이 코드는 컴포넌트의 생성, 업데이트, 제거 단계에서 콘솔에 메시지를 출력합니다. 또한, 버튼을 클릭하여 count 상태를 업데이트하고, 이에 따라 컴포넌트가 어떻게 반응하는지 관찰할 수 있습니다.

React 컴포넌트의 생명주기를 이해하는 것은 효과적인 웹 애플리케이션을 만드는 데 필수적입니다. 이 기본적인 개념을 마스터하면, 더 복잡한 기능을 구현하는 데 도움이 될 것입니다.