React LifeCycle 3 - 제거 단계

React LifeCycle

  리액트의 모든 컴포넌트는 생성-업데이트-제거라는 생명주기를 가지며, 각 생명주기에 실행되는 생명주기 메서드들을 가진다. 즉, 리액트 컴포넌트가 생성되고 제거될 때까지의 과정 안에서 특정 시점에 이에 매칭 되는 특정 메서드가 호출된다. 생명주기 메서드들은 개발자가 재정의하여 개발자가 원하는 시점에 원하는 로직이 실행되게 만들 수 있다. 이번 포스팅에선 제거 단계에 호출되는 단 하나의 메서드 componentWillUnmount() 에 대해 알아보자.

1. 생성 단계
2. 업데이트 단계 
3. 제거 단계 (now)

 

componentWillUnmount()

componentWillUnmount() {
  element.onClick = null;
}

  componentWillUnmount()는 컴포넌트의 언마운트(DOM에서 제거) 직전에 호출된다. 필요 없어진 컴포넌트가 화면에서 사라지기 직전에 호출되므로, 해당 컴포넌트와 관련된 타이머 제거, 이벤트/구독 해제, 네트워크 요청 취소 등 정리에 필요한 작업이 주로 수행된다.

 

  componentWillUnmount()가 호출되었다는 의미는 더 이상 해당 컴포넌트가 다시 렌더링 되지 않는다는 의미이기 때문에, componentWillUnmount() 내에서 setState()를 호출할 필요가 없다.

 

---

공식문서 : https://ko.reactjs.org/docs/react-component.html#componentdidupdate

React.Component – React