[React] render() 2번 되는 이유

App.js가 작동할 때 lifecycle의 작동 순서는 다음과 같다.

 

1. constructor() 맨 처음 실행 

 

2. render() 

this.state에 들어있는 monsters 빈 array 실행

 

3. componentDidMount()

그 안에 setState가 콜되면 변화가 생긴 것이기 때문에 다시 render가 실행된다.

 

4. render() 

고로 렌더가 2번 된다.

 

App 컴포넌트 뿐만 아니라

App 안의 다른 차일드 컴포넌트가 있으면 그 컴포넌트들도 아래의 순서를 따른다. 

위에서 차근 차근 코드가 실행 되다가 <CardList />컴포넌트를 만나면 

CardList 파일로 가서 

constructor() 함수 -> render() -> componentDidMount() -> render() 순으로

setState가 있으면 다음의 순서를 따를 것이다.