리액트 생명주기(Life Cycle)란?

리액트 생명주기 (Life Cycle)란 컴포넌트가 생성되고 업데이트되고 소멸되는 과정을 말한다. ⚙️ 이 생명주기를 이해하면 컴포넌트가 특정 시점에서 어떤 상태인지, 그리고 그에 따라 어떤 작업을 수행할 수 있는지 알 수 있다. 리액트 생명주기는 크게 세 가지 단계로 나눌 수 있다: 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting). 🔄

1. 마운팅 (Mounting) 🛠️

마운팅은 컴포넌트가 처음으로 DOM에 삽입될 때의 과정이다. 컴포넌트가 화면에 나타날 때 여러 가지 작업을 할 수 있는데, 이 단계에는 주로 다음과 같은 메서드들이 있다:

constructor(): 컴포넌트가 생성될 때 호출되며 초기 상태를 설정할 때 사용된다.
render(): 컴포넌트의 UI를 정의하는 메서드로, JSX를 반환한다.
componentDidMount(): 컴포넌트가 화면에 완전히 나타난 후 호출된다. 여기서 API 호출이나 DOM과 관련된 작업을 수행할 수 있다.

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    console.log('constructor 호출');
  }

  componentDidMount() {
    console.log('componentDidMount 호출');
    // API 호출 예시
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    console.log('render 호출');
    return <div>데이터: {this.state.data}</div>;
  }
}

export default ExampleComponent;

위 코드에서 컴포넌트가 마운트될 때 constructor -> render -> componentDidMount 순으로 호출된다. 🌀

2. 업데이트 (Updating) ♻️

업데이트는 컴포넌트가 상태(state)나 속성(props)의 변경으로 인해 다시 렌더링될 때의 과정이다. 이 단계에서는 다음과 같은 메서드들이 사용된다:

shouldComponentUpdate(): 컴포넌트가 다시 렌더링될 필요가 있는지 결정한다. 성능 최적화를 위해 사용할 수 있다.

render(): 상태나 속성이 변경되면 다시 호출되어 UI를 업데이트한다.

componentDidUpdate(): 업데이트가 완료된 후 호출된다. 이전 상태와 현재 상태를 비교하거나, 추가적인 작업을 수행할 때 유용하다.

componentDidUpdate(prevProps, prevState) {
  if (prevState.data !== this.state.data) {
    console.log('업데이트 완료: 새로운 데이터가 설정되었습니다.');
  }
}

위 예시에서 componentDidUpdate는 상태가 변경될 때마다 호출되어 업데이트 이후의 작업을 수행한다. 🚀

3. 언마운팅 (Unmounting) 🚪

언마운팅은 컴포넌트가 DOM에서 제거될 때의 과정이다. 이 단계에서는 componentWillUnmount() 메서드가 호출되며, 이 메서드는 컴포넌트가 소멸되기 전에 필요한 정리 작업(예: 타이머 정리, 이벤트 리스너 제거 등)을 수행할 수 있다.

componentWillUnmount() {
  console.log('componentWillUnmount 호출');
  // 타이머 정리 예시
  clearInterval(this.timer);
}

이 메서드를 통해 컴포넌트가 사라지기 전에 리소스를 정리하여 메모리 누수를 방지할 수 있다. 💡

정리 📚

리액트 생명주기는 컴포넌트의 상태 변화를 이해하고 적절한 타이밍에 필요한 작업을 수행하는 데 중요한 역할을 한다. 이를 통해 코드의 유지보수성과 성능을 높일 수 있다. 각 단계마다 적절한 메서드를 사용해 컴포넌트의 동작을 제어하고, 예기치 못한 문제를 방지할 수 있다. 😊