Class React Component LifeCycle

---

컴포넌트 생명주기

• 이전에 작성했듯이 생명주기 순서는 initialization -> mount -> update -> unmount 순서이다.
• initialization 과 mount는 보통 묶어서 표현한다.
• 자주 사용되는 메소드는 앞에 * 표시하였다.

마운트

• 아래 메소드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다.

* constructor()	
	static getDerivedStateFromProps()
* render()
* componentDidMount()

업데이트

• props 또는 state가 변경되면 갱신이 발생한다. 아래 메소드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

	static getDerivedStateFromProps()
	shouldComponentUpdate()		// false를 반환하면 render()는 호출되지 않는다.
* render()
	getSnapshotBeforeUpdate()
* componentDidUpdate()		// false를 반환하면 render()는 호출되지 않는다.

언마운트

• 아래 메소드는 컴포넌트가 DOM 상에서 제거될 때에 호출된다.

* componentWillUnmount()

오류 처리

• 아래 메소드들은 자식 컴포넌트를 렌더링하거나, 자식 컴포넌트가 생명주기 메소드를 호출하거나, 또는 자식 컴포넌트가 생성사 메소드를 호출하는 과정에서 오류가 발생했을 때에 호출된다.

	static getDerivedStateFromError()
	componentDidCatch()

---

render() - 클래스 컴포넌트에서 반드시 구현돼야 하는 유일한 메소드이다. 이 메소드가 호출되면 this.props 와 this.state의 값을 활용하여 아래의 것 중 하나를 반환해야 한다. (순수함수여야 함)

constructor(props) - 메소드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 컴포넌트에는 생성자를 구현하지 않아도 된다. constructor()내부에서 setState()를 호출하면 안 되며 this.state 를 직접 할당할 수 있는 유일한 곳이다. state에 props를 복사하면 안 된다.

componentDidMount()- 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다. 데이터 구독을 설정하기 좋은 위치이다.

componentDidUpdate(prevProps, prevState, snapshot)- 갱신이 일어난 직후에 호출된다. 이 메소드는 최초 렌더링에서는 호출되지 않는다. setState() 를 즉시 호출할 수 있지만 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다.

componentWillUnmount()- 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다. 이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState() 를 호출하면 안 된다.

출처 - https://ko.reactjs.org/docs/react-component.html