[React] 라이프사이클

[React] 라이프사이클

* 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다.

접두사

• Will : 어떤 작업을 작동하기 전에 실행
• Did : 어떤 작업을 작동한 후에 실행

라이프 사이클

• 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것
• 업데이트
• 언마운트 : 마운트의 반대과정, DOM에서 제거

마운트

1. 컴포넌트 만들기
2. constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드
3. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때
4. render : UI를 렌더링
5. componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

1. props가 바뀔때
2. state가 바뀔때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

언마운트

1. 언마운트 하기
2. componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

라이프 사이클 메서드

1. render()
2. constructor
3. getDerivedStateFromProps
4. componentDidMount
5. shouldComponentUpdate
6. getSnapshotBeforeUpdate
7. componentDidUpdate
8. componentWillUnmount
9. componentDidCatch

에러 잡아내기