LifeCycle API

이 API는 컴포넌트가 브라우저에서 나타날때, 사라질대, 업데이트 될 때 호출하는 API이다. ㅅ
이 함수들은 React.Component class에서 제공하는 메서드이다.

1. commonent가 생성 될 때

• constructor
  컴포넌트가 만들어지면서 가장 먼저 실행되는 메서드이다.

• getDerivedStateFromPorps
  getDerivedStateFromPorps는 props로 받아온 것을 state에 넣어주고 싶을 때 사용한다.
  다른 lifecycle과 달리 static을 필요로 하고, 이 안에서는 this를 조회 할 수 없다.

• render
  컴포넌트를 랜더링 하는 메서드이다.

• componentDidMount
  컴포넌트의 첫 랜더링이 끝나면 호출되는 메서드이다. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태이다.

2. 업데이트 될 때

component가 rerendering된다 라는 뜻이다. 그럼 언제 rerendering되냐? 부모component가 rerendering됬을때, 자신의 props가 바뀌었을때, 자신의 상태가 바뀔때, class component에서 this.forceUpdate()함수 호출하면 강제로 된다.

이 시점에서는

• getDervedStateFromPorps가 호출된다.

• shouldComponentUpdate
  컴포넌트 최적화하는 단계에서 사용된다. 리랜더링이 불필요한 시점에서 랜더링을 막을 수 있다. 랜더링을 할까말까~ 결정하는 메서드

• render

• getSnapshotBeforeUpdate
  브라우저에 변화를 일으키기 바로 직전에 호출되는 메서드이다. 특정 값을 반환하면 그 다음 발생하게 되는 함수에서 받아와서 사용 가능.

• componentDidUpdate 호출
  리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 후에 호출되는 메서드

3. 제거할 때

언마운트라는 것은 컴포넌트가 화면에서 사라지는 것을 의미.

• componentWillUnmount
  컴포넌트가 화면에서 사라지기 직전에 호출되며, 주로DOM에 직접 등록했던 이벤트를 제거하고, 만약 setTimeout을 걸은것이 있다면 clearTimeout을 통해 제거.

출처: 벨로퍼트님의 리엑트강의