24. LifeCycle Method

# LifeCycle Method : 컴포넌트가 브라우저에 나타나고, 업데이트되고, 사라질 때, 에러가 났을 때 호출되는 메서드들

→ 클래스형 컴포넌트에서만 사용할 수 있다. (useEffect 랑 비슷)

 

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

# 마운트 될 때의 생명주기

- constructor : 컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드

- getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용

- render : 컴포넌트를 렌더링하는 메서드

- componentDidMount : 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드. 호출되는 시점에는 컴포넌트가 이미 화면에 나타난 상태

​

# 업데이트 생명주기

- getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용

- shouldComponentUpdate : 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드 (최적화 할 때 사용. React.memo 와 비슷)

- render : 컴포넌트를 렌더링하는 메서드

- getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져옴

- componentDidUpdate : 리렌더링을 마치고, 화면에 변화가 모두 반영되고 난 뒤 호출되는 메서드

(getSnapshotBeforeUpdate 에서 특정값을 반환하면 componentDidUpdate 함수에서 받아와 값을 조회할 수 있음)

​

# 언마운트 생명주기

- componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출

---

출처 : https://react.vlpt.us/basic/25-lifecycle.html

25. LifeCycle Method · GitBook