웹페이지의 렌더링을 단계별로 나누어 구분한 것.

데이터를 받아와서 업데이트 하는 과정에 매우 요긴하게 사용되기 때문에 자세히 알아둘 수록 좋다!

Lifecycle 단계

React Component가 DOM에 렌더링이 되는 것을 Mountiing 이라고 하며, lifecycle을 나누는 기준이 된다.

1. contructor()
렌더 될 대상 component가 mount 되기 전에 호출된다.

2. render()
render 메소드에 작성된 내용이 constructor 를 참조해 화면에 출력된다.

3. ComponentDidMount
component가 DOM에 mounting된 직후 실행된다.
보통 데이터 수신 관련된 처리를 할 때 주로 사용된다.
왜 렌더링 된 이후에 수신하냐면, 네트워크 통신 전에 UI를 완성함으로써 보다 빠르게 페이지를 구축할 수 있기 때문이다.
그리고, 네트워크 통신이 길어지는 경우에도 UI는 그대로 보여지기 떄문에 사용자가 페이지를 사용하는데 불편함을 덜 느낄 수 있기 때문.

4. ComponentDidUpdate
component가 갱신되었을 때 호출되어, 갱신 시점에 처리해야될 작업이 있으면 처리된다.
(변경된 내용을 기반으로 네트워크 통신을 해야 하는 경우에 사용된다)

5. ComponentWillUnmount
component가 DOM상에서 제거되기 직전에 호출된다.
이 메소드 내에서 UI제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 네트워크 수신 해제 등 필요한 모든 정리작업을 수행해야 한다.
이 후, 해당 컴포넌트가 다시 렌더링되지 않기에 절대 setState() 를 호출해서는 안된다! (해봤자 안되니까..)

추가 사항

1. shouldComponentUpdate()
props 또는 state 가 새로운 값으로 갱신되어서 렌더링이 발생하기 전에 호출된다.
현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지에 대한 여부를 반환한다.
이 메소드는 성능 최적화를 위해 만들어진 것으로, 렌더링을 방지하는 목적으로는 다른 메소드를 사용할 것.

2. componentDidCatch(error, info)
자손 component에서 오류가 발생했을 때 호출된다. 오류 로그 기록용으로 사용하면 좋다
error : 발생한 오류
info : 어떤 component가 오류를 발생시켰는지에 대한 정보를 담고 ㅇㅆ다텍스트