[React] 클래스형 컴포넌트의 생명주기(life cycle)

📌 생명주기 메서드가 실행되는 시점

---

마운트(mount)	컴포넌트가 마운팅(생성)되는 시점
업데이트(update)	이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점
언마운트(unmount)	컴포넌트가 더 이상 존재하지 않는 시점

 

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

 

 

 

📌 생명주기 메서드

---

render()

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

1. 컴포넌트가 UI 를 렌더링하기 위해서 쓰인다.
2. render() 함수는 항상 순수해야 하며 부수 효과가 없어야 한다. 
3. this.setState 를 호출해서는 안된다.

 

componentDidMount()

컴포넌트가 마운트되고 난 후 호출되는 메서드

1. this.setState()로 state 값을 변경하는 것이 가능하다.
   (다만, 일반적으론 state를 다루는 것은 생성자에서 하는 것이 좋다.)
2. state가 변경되고, 그리고 그 즉시 다시 한 번 렌더링이 실행된다.

 

componentDidUpdate()

컴포넌트 업데이트가 일어난 이후 호출되는 메서드

1. 일반적으로 state나 props의 변화에 따라 DOM 을 업데이트 하는 등에 쓰인다.

 

componentWillUnmount()

컴포넌트가 언마운트되거나 더 이상 사용되지 않는 직전에 호출되는 메서드 

1. 메모리 누수나 불필요한 작동을 막기 위한 클린업 함수를 호출하기 위한 위치다.
2. this.setState를 호출할 수 없다.
3. API 호출을 취소하거나, setInterval, setTimeout 로 생성된 타이머를 지우는 등의 작업을 하는데 사용된다.

 

shouldComponentUpdate()

state나 props의 변경으로 컴포넌트가 다시 리렌더링 되는 것을 막고 싶을 때 사용하는 메서드 

1. this.setState 가 호출되면서 리렌더링이 되기에 이 메서드를 사용하여 리렌더링을 막는다.

 

static getDerivedStateFromProps()

componentWillReceiveProps를 대체할 수 있는 메서드

1. static 으로 선언되어 있어, this에 접근할 수 없다.
2. 모든 render() 실행 시에 호출된다.

 

getSnapShotBeforeUpdate()

componentWillUpdate() 를 대체할 수 있는 메서드

1. DOM이 업데이트되기 직전에 호출된다.
2. 반환되는 값은 componentDidUpdate로 전달된다.
3. DOM에 렌더링 되기 전에 윈도우 크기를 조절하거나 스크롤 위치를 조정하는 등의 작업에 사용된다.