React | 렌더링 주기 - 제거 단계 (Unmounting)

---

•  componentWillUnmount()
  • 생명주기 메서드 중 하나
  • 컴포넌트가 DOM에서 언마운트(제거) 되기 전에 호출된다.
  • 리소스 해제, 타이머 제거, 이벤트 리스너 해제 등 컴포넌트 정리 작업을 수행 할 수 있다.

---

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timerId: null,
    };
  }

  componentDidMount() {
    // 컴포넌트가 마운트된 후에 타이머를 설정
    const timerId = setInterval(() => {
      console.log('Timer is ticking...');
    }, 1000);

    // 타이머 ID를 상태에 저장
    this.setState({ timerId });
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트되기 전에 타이머를 제거
    const { timerId } = this.state;
    clearInterval(timerId);
    console.log('Timer is cleared.');

    // 다른 정리 작업 수행 가능
  }

  render() {
    return (
      <div>
        <p>My Component</p>
      </div>
    );
  }
}

export default MyComponent;