react - Life Cycle (생명주기 함수)

리액트의 생명주기는 컴포넌트의 생성, 변경, 소멸의 과정을 뜻한다

constructor 

컴포넌트의 생성자 메서드로 컴포넌트가 만들어지면 가장 먼저 실행된다.

 

getDerivedStateFromProps 

앞에 static 을 필요로 하고, this를 조회할 수 없다.

특정 개체를 반환하면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 정설된다.

null을 반환하면 아무일도 발생하지 않음.

이 메서드는 리렌더링 되기 전에도 매번 실행된다.

 

render

컴포넌트를 렌더링 해준다.

 

componentDidMount

컴포넌트의 첫번째 렌더링이 끝나면 호출되는 메서드.

주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다.

 

 

호출되는 순서

constructor() => getDerivedStateFromProps() => render() => componentDidMount() 의 순서로 호출