https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
리엑트 라이프 사이클 매우 잘 나와있는 사이트를 우연히 찾게 되었다.
생성될 때
1. constructor() 실행
Render 단계
constructor(props)메서드를 바인딩 하거나 state를 초기 할당함 (없다면 구현하지 않아도 됨)
해당 컴포넌트가 마운트되기 전에 호출
- this.state에 객체를 할당하여 지역 state를 초기화
- 인스턴스에 이벤트 처리 메서드를 바인딩
2. getDerivedStateFromProps()
props 로 받아온것을 state에 추가해주고 싶을때 사용
static getDerivedStateFromProps(props, state)이 메서드는 이유와 상관없이 렌더링 할 때마다 실행됨
3. shouldComponentUpdate()
성능 최적화
컴포넌트가 리렌더링을 할지 말지 결정
4. render()
컴포넌트를 렌더링하는 메서드
render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야 함
render() 함수는 순수해야 하고, 컴포넌트의 state 변경이 안되고 호출 될때마다 동일한 결과를 반환해야 함. 직접 상호작용 X
상호작용이 필요하다면 componentDidMount()나 다른 생명주기 메서드 내에서 수행하여야 함.
shouldComponentUpdate()가 false를 반환하면 render()는 호출되지 않습니다.
5 . React DOM 및 refs 업데이트
“Commit 단계”
componentDidMount()컴포넌트가 마운트 된 직후에 호출. DOM노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어짐
업데이트 할 때
1. getDerivedStateFromProps()
컴포넌트의 props나 state가 바뀌었을 시 호출
- New props
- setState()
- forceUpdate()
2. shouldComponentUpdate()
위에서 설명
3. render()
위에서 설명
4. getSnapshotBeforeUpdate()
컴포넌트 변화 일어나기 전에 DOM 상태를 가지고 와서 특정값을 반환하면 componentDidUpdate 함수에서 받아와 사용 가능함
5. componentDidUpdate()
갱신이 일어난 직후에 호출. 최초 렌더링에서는 호출되지 않음.
언마운트
1. componentWillUnmount()
컴포넌트가 화면에서 사라지기 직전에 호출. 다시 렌더링되지 않음으로 setState()를 호출하면 안됨.
