리액트 라이프 사이클

리액트 라이프사이클

💡 React@17 부터 `componentWillMount`, `componentWillUpdate`, `componentWillReceiveProps`는 deprecated 되었다.

Mount

컴포넌트가 DOM에 붙는 과정.

1. context, defaultProps, state 저장
2. componentWillMount 메소드 호출 [react@17 deprecated]
3. render메소드로 컴포넌트 DOM에 부착 (여기까지도 마운트 중에 속함)
4. 마운트 완료 지점에서 componentDidMount 메소드 호출 
   • componentDidMount에서 DOM 접근 가능
   • 이 시점에 비동기요청 또는 setTimeout, setInterval 실행

 

Props Update

props가 변경될 때의 과정.

1. 업데이트 발생 감지하여 componentWillReceiveProps 메소드 호출 [react@17 deprecated]
2. shouldComponentUpdate 메소드 호출
   • 이 시점에 render(업데이트 완료) 전이기 떄문에 return false 로 render를 취소할 수 있음 (성능 최적화)
   • 쓸 때 없는 업데이트는 여기서 걸러져야 함
3. componentWillUpdate 메소드 호출 [react@17 deprecated]
   • 이 시점엔 props를 업데이트하지 않은 상태이기 떄문에 해당 시점엔 state를 변경하면 안된다. (주의)
4. 업데이트 완료 시점(render)
5. componentDidUpdate 메소드 호출
   • componentDidUpdate는 업데이트가 된 후이기 때문에 이전의 props 정보도 가지고 있음

 

State Update

setState() 호출을 통해서 state가 업데이트 될 때의 과정.

해당 과정은 props의 과정과 같다. 다만 componentWillReceiveProps는 호출하지 않는다.

자세한 설명은 Props Update에서 확인하면 된다.

1. shouldComponentUpdate
2. componentWillUpdate [react@17 deprecated]
3. render
4. componetDidUPdate

 

Unmount

컴포넌트가 제거되는 과정.

1. componentWillUnmount

해당 메소드에서 이벤트 리스너를 제거하는 등의 정리를 진행한다.

 

 

Error

React 16부터 error를 캐치할 수 있게 되었다.

componentDidCatch 메서드를 통해서 에러 발생시에 대해 이벤트를 생성가능하게 됐다.

componentDidCatch(error, info) {
 // ...
}