ComponentDidMount 와 render의 차이?

출처 : zerocho / velopert

 

각각의 뜻을 먼저 살펴보자면

 

render

컴포넌트 렌더링을 담당합니다.

 

componentDidMount

컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다.
이 안에서 다른 JavaScript 프레임워크를 연동하거나,
setTimeout, setInterval 및 AJAX 처리 등을 넣습니다.

 

render은 컴포넌트를 DOM에 부착하는 역할을 한다.

그리고 mount가 완료되고 나면 componentDidMount가 호출된다.

 

즉,

 

1. state, context, defaultProps 저장

2. componentWillMount

3. render

4. componentDidMount

이 순서대로 실행이 된다.

 

그림으로 보면 이렇다.