react 7

life cycle method

component를 생성하고 없애는 방법

 

Mounting 

component가 새롭게 생성되는 시점이다. component 함수가 실행되고 결과물로 나온 Element 들이 Virtual DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다.

constructor : class를 생성할 때 사용하는 JS 문법이다. component가 mount될 때, constructor를 호출한다. 그리고 나서 render function을 호출한다.

componentDidMount : 결과물이 DOM에 mount된 직후 실행되는 메소드이다.

 

Update

state나 props가 변경이 되면 update가 진행되며 다시 rendering 된다. component가 update 될 때, 아래의 순서대로 메소드가 실행된다.

1. new Props / setState() : new Props는 상위 component로부터 갱신된 props를 받은 경우이며, setState는 state를 변경하는 함수이다.

2. render()

3.componentDidUpdate() : update가 이루어지고 render가 완료된 직후에 실행되는 메소드이다. 최초 mount 때는 실행되지 않는다.

 

Unmounting

component가 DOM 상에서 제거될 때 실행되는 life cycle 이다.

componentwillunmount() : 최종적으로 제거가 되기 전 실행된다. 네트워크 요청, 타이머 이벤트와 같이 지속적으로 이루어지는 이벤트들을 해제하는데 사용된다.

 

 

 

출처

https://velog.io/@cyranocoding/React-Life-Cycle-시리즈Mount-편-tkjzpagfsu

React Life Cycle 시리즈(Update/Unmount 편)