🪐 생명주기 메서드(LifeCycle Method)
- 컴포넌트가 브라우저상에 나타나고 업데이트되고 사라지게 될 때 호출되는 메서드들이다. 추가로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다
- 생명주기 메서드는 클래스형 컴포넌트에서만 사용가능하다
출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- 라이프 사이클은 총 3가지로 나뉜다. Mount, Update, Unmount
⚾ Mount
- DOM이 생성되고 웹 브라우저 상으로 나타내는 것을 말한다
- 마운트시에 호출되는 메서드 :
- constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
- getDerivedStateFromProps : preop로 받아온 것 state에 넣고 싶을 때
- render : 컴포넌트 렌더링 메서드
- componentDidMount: 첫번째 렌더링 마치면 호출되는 메서드(이 시점에는 외부 라이브러리를 연동하거나 비동기가 일어나 DOM을 변경)
🏀 Update
-
react 리렌더링의 조건일 경우에 업데이트를 한다
-
업데이트시 호출하는 메서드 :
- getDerivedStateFromProps: props가 바뀌었을 때
- shouldComponentUpdate : 컴포넌트가 리렌더링할지 말지(최적화)
- render
- getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전의 DOM상태 가져오기
- componentDidUpdate: 리렌더링 마치고 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드
🏈 UnMount
-
Mount의 반대과정, 컴포넌트를 DOM에서 제거하는 것
-
언마운트시에 호출하는 메서드:
- componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출 (DOM에 직접 등록했던 이벤트 제거, setTimeout이 있었다면 clearTimeout을 통해 제거하는 경우)
출처: https://react.vlpt.us/basic/25-lifecycle.html
https://velog.io/@youngminss/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-%EB%A9%94%EC%84%9C%EB%93%9C
winwin