React/React Basic
[React] render() 2번 되는 이유
CodeMia
2022. 4. 29. 15:18
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가 있으면 다음의 순서를 따를 것이다.