React Component lifecycle diagram - React

-componendDidMount

• 생성될 때
• 화면에 등장한(mount) 후
• 새로운 props를 받을 때
• 새로운 상태를 가질 때

 

-componentDidUpdate

•  새로운 상태를 갖고 난 후

 

-componentWillUnmount

•  화면에 사라지기(unmount) 전

 

함수 컴포넌트는 라이프사이클 메소드를 부를 수 없다. 클래스 컴포넌트만 가능

 처음 마운트 됐을 때나 상태가 변화했을 때 비동기 요청을 보낼 때가 많은데 render나 constructor에서는 비동기 요청을 호출할 수 없다(= async/await으로 사용할 수 없다는 의미).

그 때, 대신 componentDidMount나 componentUpdate 메소드를 사용한다. 

componentWillUnmount의 경우 복잡한 작업 후 메모리를 비우고 싶거나 정리하고 싶을 때 clearTimeout, removeEventListener 를 넣어 사용한다.

 

 

다이어그램 메소드 정리된 사이트

projects.wojtekmaj.pl/react-lifecycle-methods-diagram/