[React] 생명주기 메서드

목차

React 생명주기 메서드: 컴포넌트의 탄생부터 소멸까지 🌱➡️🍂

안녕하세요, React 개발에 관심 있는 여러분! React 컴포넌트의 생명주기는 컴포넌트가 생성되어 페이지에 마운트되는 순간부터, 페이지에서 제거되어 소멸하는 순간까지의 전 과정을 말합니다. 이 과정에서 React는 여러 "생명주기 메서드"를 제공하여, 특정 시점에 원하는 코드를 실행할 수 있게 해줍니다. 이번 포스트에서는 React 클래스 컴포넌트의 주요 생명주기 메서드와 그 사용법에 대해 알아보겠습니다.

---

컴포넌트의 생명주기: 주요 단계

1. 마운팅(Mounting): 컴포넌트가 DOM에 삽입되는 단계입니다.
2. 업데이트(Updating): 컴포넌트의 props 또는 state가 변경되어, 리렌더링이 필요한 단계입니다.
3. 언마운팅(Unmounting): 컴포넌트가 DOM에서 제거되는 단계입니다.

 

주요 생명주기 메서드

마운팅 단계

• constructor(): 컴포넌트의 생성자 메서드로, 컴포넌트가 마운트되기 전에 호출됩니다. state의 초기화나 메서드 바인딩에 사용됩니다.
• render(): UI를 렌더링하는 메서드로, 순수 함수로 작성되어야 합니다.
• componentDidMount(): 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. DOM 노드가 필요한 초기화 작업이나 네트워크 요청 같은 외부 데이터 로딩에 사용됩니다.

업데이트 단계

• shouldComponentUpdate(): 컴포넌트의 리렌더링을 결정합니다. 성능 최적화에 사용할 수 있습니다.
• componentDidUpdate(): 컴포넌트 업데이트가 렌더링된 후에 호출됩니다. 이전 props나 state에 접근할 수 있어, 특정 업데이트 후의 로직을 실행하는 데 사용됩니다.

언마운팅 단계

• componentWillUnmount(): 컴포넌트가 언마운트되고 파괴되기 직전에 호출됩니다. 필요한 정리 작업을 수행하는 데 사용됩니다.

 

생명주기 메서드 사용 예

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

  componentDidMount() {
    console.log('Component Did Mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component Did Update');
  }

  componentWillUnmount() {
    console.log('Component Will Unmount');
  }

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

 

마무리하며...

React의 생명주기 메서드는 컴포넌트의 다양한 단계에서 필요한 동작을 정의하는 데 매우 중요합니다. 각 메서드의 목적과 시점을 정확히 이해하고, 이를 통해 앱의 성능을 최적화하고, 필요한 작업을 효과적으로 관리할 수 있습니다. React의 세계에서 생명주기 메서드를 마스터함으로써, 보다 강력하고 유연한 애플리케이션을 구축해보세요!

---

Reference:

React.Component – React

React Lifecycle Methods diagram