Component Life Cycle

react component에서 사용하는 유일한 function은 render function이다.

 

하지만 react class component는 단순히 render fucntion이외에 더많은 것이 있다.

이들은 life cycle method를 가지는데, 기본적으로 react가  component를 생성하고 다시 없애는 방법이다.

컴포넌트가 생성될 때, render전에 호출되는 몇가지 function이 있고~ render된 후 호출되는 다른 function들이 존재한다.

 

자 이제 life cycle method중  Mounting을 살펴보겠다.

react 공식 문서에서 살펴보면 이 메소드는 컴포넌트의 인스턴스가 생성되어 Dom에 insert될 때 순서대로 호출된다고 한다.

Mounting method중 먼저 호출되는 function이 바로 constructor이다

class를 복기하면 될 듯하다,

우선 순서를 살펴보자 constructor를 만들어주고 render와 비교해 무엇이 먼저 호출 되는지 보자

constructor가 먼저 호출이 된다.

 

그 이후 render()가 실행이 되고 이후 componentDidMount가 실행이 된다. 

(중간에  static getDerivedStateFromProps()는 잘 사용을 하지 않는다고 한다.)

넘어가서~~  componentDidMount는  현재 component가 처음 render 되었다고 알려준다.

 

세가지 전부 사용했을때  순서이다. constructor -> render -> componentDidMount~

자 Mount Method 는 음 컴포넌트의 탄생이랄까? 그렇게 생각하면 되겠다.

 

 

이번엔 Updating을 살펴보자

업데이트는 props or state의 변화에 따라 일어난다. 그리고 역시 function들이 있는데 이 또한 순서대로 호출 된다.

일단 state의 경우 setState를 호출할 때 마다 발생한다. 

다른 것들은 제외하고 componentDidUpdate()만 살펴보자

mounting의 componentDidMount()까지 이루어지고~ 버튼을 클릭해 state에 변화가 일어나면

다시 render가 실행되고~ 이후 componentDidUpdating()이 실행 된 모습을 볼 수 있다.

 

이제 component가 Dom상에서 제거될때인 Unmount를 살펴보면

componentWillUnmout()가 호출된다.

 

이렇게 component의 life cycle에 대해서 알아보았다.