10/6[TIL]React Life Cycle

React의 컴포넌트는 생명주기(Life cycle)를 가진다.

여기서 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때까지 일련의 과정을 말하는데 이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메소드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

 

라이프 사이클을 쪼개서 본다면 생성, 업데이트, 제거로 볼 수 있으며 이를 더 세분화하여 본다면

 

[생성]

생성 될 때는 construcutor

화면에 등장한 후 componentDidMount

 

[업데이트]

새로운 props를 받을 때 New props

새로운 상태를 가질 때 setState()

새로운 상태를 갖고 난 후 componentDidUpdate

 

[제거]

화면에서 사라지기 전 componentWillUnmount

clearTimeout, removeEventListener 등을 추가하여 보다 깔끔하게 사용할 수 있다.

 

아래 있는 그림을 참고하면을 좋을 것이다.

출처 : https://twitter.com/dan_abramov/status/981712092611989509

위의 그림을 참고하자면 매 중요한 순간마다 컴포넌트는 새로 렌더링 된다는 것을 알 수 있다. 물론 사라지기 전은 제외하고 말이다.

 

함수 컴포넌트에서는 라이프사이클(상태가 변화될 때 사용) 메소드를 부를 수 없다.

라이프사이클은 Class 컴포넌트에서만 사용 할 수 있다.

 

componentDidMount / componentDidUpdate 사용 이유는 상태가 변화 되었을 때 즉, 처음 Mount가 됐을 때 비동기 요청을 보낼 때 사용하는데 construnctor, render는 async/await를 사용 못하기 때문에 사용한다고 한다. 이전에 우리가 배운 fetch or setTimeout 이런 느낌? 으로 이해하면 될 것 같다.