- Lifecycle, Hooks -

: 생명주기 메소드(클래스형 컴포넌트에서 주로 사용)
컴포넌트가 브라우저상에 나타남 -> 업데이트 -> 사라짐

=> 이때 호출되는 메서드

(제일 자주 나오는 이미지)

위의 변화가 발생할 때마다 생명주기 메소드가 호출됨

생성될 때(마운트) : DOM이 생성되고 웹브라우저 상에서 나타남
업데이트할 때(업데이트)
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
제거할 때(언마운트) : DOM에서 제거됨

생성될 때(마운트)
- construcor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
- getDerivedStateFromProps : props로 받아온 것을 stae에 넣어주고 싶을 때 사용 (컴포넌트가 처음 렌더링 되기 전에 호출 / 이후 리렌더링 되기 전에도 매번 실행)
- render : 컴포넌트를 렌더링하는 메서드
- componentDivMount : 첫번째 렌더링 후에 호출되는 메서드
업데이트할 때(업데이트)
- getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀌었을 때도 호출됨
- shouldComponentUpdate : 컴포넌트가 리렌더링 할지 말지를 결정(최적화 할 때 사용)
- render : 컴포넌트를 렌더링하는 메서드
- getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환(componentDidUpdate 함수에서 받아와서 사용)
- componentDidUpdate : 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드(getSnapshotBeforeUpdate 에서 반환한 값을 조회)
제거할 때(언마운트)
- componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출(DOM에 직접 등록했었던 이벤트를 제거)

React | Lifecycle, Hooks