[React.js] 생명주기(LifeCycle) 정리

react를 쓰다보면 생명주기를 알아두어야 편해서 이참에 정리합니다.

# 컴포넌트 생성

constructor(props)

- 컴포넌트가 새로 만들어질때 호출

componentWillMount()

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

- v16.x 이후부터 deprecate 

componentDidMount()

- 컴포넌트가 화면에 나타나고 나서 호출

- 내 경우는 화면 먼저 보이고 jqury 플러그인을 적용해야 했을때 사용.

: 예제) lightSlider 적용

: window.$(this.props.item.id + " .autoWidth").lightSlider({"item": 1});

다음 순서로 실행

1. state, context, defaultProps 저장

2. componentWillMount

3. render

4. componentDidMount

# 컴포넌트 업데이트

componentWillReceiveProps(nextProps)

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

- 새로 받게될 props는 nextProps 로 조회가능하고, 아직 this.props 에 적용되기 전.

- v16.x 이후부터 deprecate

getDerivedStateFromProps(nextProps, prevState)

- props 로 받아 온 값을 state로 동기화 해야할 때 사용.

- setState 를 쓰지 않고 다음처럼 사용

if(nextProprs.value !== prevState.value){

return { value: nextProps.value }

}

- 마지막에 null을 리턴하면 업데이트 할 것이 없다는 것을 의미.

return null;

shouldComponentUpdate(nextProps, nextState)

- 아직 render 하기전 상태.

- 주로 성능 최적화를 이곳 작성.

- return false 를 하면 render를 취소할 수 있음

componentWillUpdate(nextProps, nextState)

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

- 주로 애니메이션 효과를 초기화 하거나 리스너를 없애는 작업을 함.

- 이 함수를 호출 한 후 render() 가 호출.

- v16.x 이후부터 deprecate

getSnapshotBeforeUpdate(prevProps, prevState)

- DOM 업데이트가 일어나기 직전 상태.

- v16 에서 새롭게 추가

componentDidUpdate(prevProps, prevState, snapshot)

- render 를 호출하고 난 다음에 발생.

- 이 시점에는 this.props 와 this.state 의 값이 변경된 상태.

- prevProps, prevState 를 통해 이전 값 조회 가능.

- getSnapshotBeforeUpdate 에서 반환한 값을 snapshot로 조회 가능

다음 순서로 실행

1. componentWillReceiveProps

2. shouldComponentUpdate

3. componentWillUpdate

4. render

5. getSnapshotBeforeUpdate

6. componentDidUpdate

---

# 컴포넌트 제거

componentWillUnmount()

- 삭제되고 나서 실행

- 이벤트나 function, 외부 라이브러리 인스턴스 제거 등 할때 사용

---

# 컴포넌트 에러 발생

componentDidCatch(error, info)

- 컴포넌트에 에러가 발생할 경우 잡아냄

- 자식 컴포넌트에서 발생하는 에러도 잡을 수 있음.

---

참조사이트:

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

https://velopert.com/3631