컴포넌트 LifeCycle

1. 컴포넌트 초기 생성

constructor : 컴포넌트 생성자 함수

componentWillMount: 컴포넌트가 화면에 나가기 직전에 호출

componentDidMount: 컴포넌트가 화면에 나타나게 됐을 때 호출

2. 컴포넌트 업데이트

componentWillReceiveProps

 - 컴포넌트가 새로운 props 를 받게 됐을 때 호출

 - getDerivedStateFromProps()로 대체

getDerivedStateFromProps()

- props로 받아온 값을 state로 동기화 하는 작업을 해줘야 하는 경우에 사용

shouldComponentUpdate

- 컴포넌트가 업데이트 되어야할때 true / false 를 설정하여 render 함수를 호출할지 결정

componentWillUpdate :     

- shouldComponentUpdate 에서 true를 반환했을때만 호출, 

- 애니메이션 효과 초기화, 이벤트 리스너를 없애는 작업을 함, 

- 이 함수가 호출되고 난 다음에 render() 함수가 호출됨

- getSnapshotBeforeUpdate()로 대체됨(v16.3)

 

getSnapshotBeforeUpdate()

- DOM 변화가 일어나기 직전의 DOM상태를 가져오고, 

- 여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있음

* 실행순서

1. render()

2. getSnapshotBeforeUpdate()

3. 실제 DOM 에 변화 발생

4. componentDidUpdate

componentDidUpdate

- render()호출 이후에 발생

3. 컴포넌트 제거

componenetWillUnmount

- 등록했던 이벤트를 제거하고, setTimeout 걸은것이 있다면 clearTimeout을 통해 제거

4. 컴포넌트 에러 발생

componentDidCatch

- 에러가 발생하면 실행됨