<React> Component Life Cycle

*** 노마드코더에서 무료로 강의해주는 ReactJS 강의를 보고 개인적으로 정리한 내용입니다. ***

---

React component에서 사용하는 유일한 함수는 render()이다.

Render()가 실행되기 전과 후에 실행되는 다른 함수들이 있다.
즉, component가 update될 때, 호출되는 다른 함수들이 있다.

---

1. mounting = component가 태어나는 것과 같다.
   1-1. constructor() : 생성자
   component가 모니터에 표시될 때, component가 website에 갈 때, constructor를 호출한다.
   1-2. static getDerivedStateFromProps() : 거의 사용하지 않는다.
   1-3. render()
   1-4. componentDidMount() : 해당 component가 최초로 render됐음을 알림

- component를 생성하는 단계에서는 위와 같은 순서로 함수들이 호출된다.

---

2. . updating : 개발자가 component의 값을 update하는 것
   2-1. static getDerivedStateFromProps() : 거의 사용 안함
   2-2. shouldComponentUpdate() : 거의 사용 안함update를 할 지 말지 결정하는 것에 대한 함수
   2-3. render()
   2-4. getSnapshotBeforeUpdate() : 거의 사용 안함
   2-5. componentDidUpdate() : component가 update됐는지를 확인하는 함수

- update가 일어나면, 특히 setState()를 호출하면 위와 같은 순서로 함수들이 호출된다.

---

3. unmounting : component가 죽을 때, 즉 page를 바꿀 때

• componentWillUnmount : 변경사항을 저장하면 서버가 새로고침 되며 컴포넌트도 같이 사라지기 때문에 이를 통해 작동을 확인할 수 있다.