1. 리액트 사이클
리액트에서 화면이 처음 생성될때와 업로드될때 실행되는 함수순서이다.
2. 브라우저 생성 예시
각각의 함수내에는 console로 실행된다는 코드를 넣어줬고 componentDidMount에서는 setState로 state값을 변경해주는
코드를 넣어 줬다. render함수내에도 실행되면 console이 찍히게 해줬다.
이 코드를 npm start로 실행하고나서 처음으로 콘솔창에 찍히는걸 보게되면 어떤 순서로 console이 찍히는지 확인할 수 있다
첫번째로 constructor함수가 실행되고 render함수가 실행되고 나서 componentDidMount 함수가 실행된다.
componentDidMount함수는 constructor, render함수가 다 실행되고나서 호출된다. 그래서 보통 백엔드를 통해서
정보를 가지고 올때 componentDidMount함수를 통해서 가져온다고 한다.
componentDidMount함수 이후에 render함수가 한번 더 실행되는데 이는 setState로 인해서 state값이 변경되어서
render함수가 한번 더 실행된것이다. state값이 변경되어 페이지가 render될때는 위의 constructor함수와 componentDidMount는
실행되지않고 render함수만 실행되는걸 볼 수 있다.
'React' 카테고리의 다른 글
| TIL 17 React 별점구현하기(기본) (0) | 2021.11.07 |
|---|---|
| TIL 16 MockData 활용하기 (0) | 2021.11.04 |
| TIL 14 React 불변성 (0) | 2021.10.28 |
| React로 인스타그램 피드창 댓글 업로드 구현 (0) | 2021.10.26 |
| TIL 14 React로 인스타그램 로그인 구현(setState, 삼항연산자) (0) | 2021.10.24 |
