React.js에서 componentWillUnmount()에서 DOM 요소와 중단된 요청 정리하는 방법

ReactJs에서 componentWillUnmount()를 올바르게 사용하는 방법

ReactJs에서 componentWillUnmount()는 컴포넌트가 언마운트되고 파괴되기 바로 전에 호출되는 라이프사이클 메서드입니다. 이 메서드는 타이머 무효화, 네트워크 요청 취소 또는 componentDidMount() 메서드에서 생성된 DOM 요소들을 정리하는 등 필요한 정리 작업을 수행할 기회를 제공합니다.

정리 작업 수행하기

componentWillUnmount()의 일반적인 사용 사례 중 하나는 타이머 무효화입니다. componentDidMount() 메서드에서 setTimeout() 또는 setInterval()을 사용하여 타이머를 설정한 경우, 컴포넌트가 언마운트될 때 이러한 타이머를 해제하여 메모리 누수를 방지하고 올바르게 정리될 수 있도록 해야 합니다.

다음은 예시입니다:

componentDidMount() {
  this.timerID = setInterval(() => {
    // 어떤 작업 수행
  }, 1000);
}

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

DOM 요소 정리하기

componentDidMount() 메서드 내에서 동적으로 DOM 요소를 생성하거나 조작하는 경우, 컴포넌트가 언마운트될 때 이러한 요소들을 정리하는 것이 중요합니다. 이를 잊어버리면 메모리 누수나 예상치 못한 동작이 발생할 수 있습니다.

여기 몇 가지 예시가 있습니다:

class SideMenu extends Component {
  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  closeMenu() {
    // 메뉴 닫기
  }

  render() {
    return (
      <div>
        <a href="javascript:void(0)" onClick={this.closeMenu}>닫기</a>
        <div>메뉴 내용</div>
      </div>
    );
  }
}

import React, { Component } from 'react';

export default class Chart extends Component {
  componentDidMount() {
    const chartElement = document.getElementById("chart");
    // d3.js와 같은 라이브러리를 사용하여 차트 생성
  }

  componentWillUnmount() {
    const chartElement = document.getElementById("chart");
    // 차트 요소를 DOM에서 제거
    chartElement.remove();
  }

  render() {
    return (
      <div id="chart"></div>
    );
  }
}

이는 타이머와 DOM 요소를 올바르게 정리하기 위해 componentWillUnmount()를 사용하는 몇 가지 예시에 불과합니다. 특정 요구사항에 따라 다른 여러 가지 사용 사례가 있을 수 있습니다.

결론

ReactJs의 componentWillUnmount() 메서드는 컴포넌트가 언마운트되기 전에 정리 작업을 수행하기 위한 강력한 도구입니다. 이 메서드를 사용하여 컴포넌트 라이프사이클 동안 생성 또는 조작된 자원 또는 DOM 요소를 올바르게 정리하여 메모리 누수를 방지하고 원활한 사용자 경험을 보장해야 합니다.

componentWillUnmount()를 효과적으로 활용함으로써 ReactJs 컴포넌트를 더 효율적이고 유지보수 가능하게 만들 수 있습니다.

참고 자료 : 

reactjs