React에서의 컴포넌트 라이프사이클 이해하기

React는 웹 개발에서 매우 인기 있는 라이브러리입니다. 특히, 컴포넌트 라이프사이클을 이해하는 것은 React를 사용하여 효율적인 웹 애플리케이션을 만드는 데 중요합니다. 이 글에서는 React 컴포넌트의 라이프사이클을 쉽게 이해할 수 있도록 설명하겠습니다.

컴포넌트 라이프사이클이란?

간단히 말해서, 컴포넌트 라이프사이클은 컴포넌트가 생성되고, 화면에 나타나고, 업데이트되고, 마지막으로 사라지는 과정을 말합니다. 이 과정은 여러 단계로 나뉘며, 각 단계에서 특정 작업을 수행할 수 있습니다.

주요 라이프사이클 메서드

1. 마운팅(Mounting)

컴포넌트가 처음으로 DOM에 삽입되는 단계입니다. 여기서는 다음과 같은 메서드들이 중요합니다:

• constructor(): 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정할 수 있습니다.
• render(): 컴포넌트의 UI를 정의합니다. 이 메서드는 순수 함수여야 하며, 이 단계에서 상태를 변경해서는 안 됩니다.
• componentDidMount(): 컴포넌트가 마운트된 직후에 호출됩니다. 여기서 API 호출과 같은 외부 데이터를 불러오는 작업을 수행할 수 있습니다.

2. 업데이트(Updating)

컴포넌트의 상태나 프로퍼티가 변경될 때 발생합니다. 주요 메서드는 다음과 같습니다:

• render(): 컴포넌트를 다시 그립니다.
• componentDidUpdate(): 컴포넌트가 업데이트된 후에 호출됩니다. 이전 상태나 프로퍼티와 비교하여 특정 작업을 수행할 수 있습니다.

3. 언마운팅(Unmounting)

컴포넌트가 DOM에서 제거될 때입니다. 여기서는 주로 다음 메서드를 사용합니다:

• componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출됩니다. 여기서 타이머를 제거하거나, 네트워크 요청을 취소하는 등의 정리 작업을 수행할 수 있습니다.

예제: 타이머 컴포넌트

React 컴포넌트 라이프사이클을 이해하는 데 도움이 되는 간단한 타이머 컴포넌트 예제를 살펴보겠습니다.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      seconds: this.state.seconds + 1
    });
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

이 컴포넌트는 componentDidMount()에서 타이머를 설정하고, componentWillUnmount()에서 타이머를 정리합니다. tick() 메서드는 매초마다 호출되어 상태를 업데이트합니다.

React 컴포넌트의 라이프사이클을 이해하고 활용하면, 효율적이고 강력한 웹 애플리케이션을 만들 수 있습니다. 이 글이 그 첫걸음이 되기를 바랍니다.