React Lifecycle #2 (Update와 Unmount에 대해)

업데이트(갱신, Update) 이벤트

컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다.

컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다.

 

1. new Props / setState() / forceUpdate()
2. getDerivedStateFromProps
3. shouldComponentUpdate
4. render
5. getSnapshotBeforeUpdate
6. componentDidUpdate

---

New Props

상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다.
이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다.

---

setState

컴포넌트들은 공통적으로 setState() api를 제공한다.
현재 자신이 가진 state를 변경할 수 있도록 해준다.

---

forceUpdate

컴포넌트의 state또는 props가 변경되면, 컴포넌트가 다시 렌더링된다.
어떤 컴포넌트의 render()메서드가 다른 데이터 값에 의존하는 경우, React로 하여금 forceUpdate()를 호출하여 렌더링을 다시 수행하도록 한다.

render()내에서는 forceUpdate()를 사용하지 말아야 한다.
오직 this.props와 this.state의 값만 사용해야 한다.

---

getDerivedStateFromProps

#1을 참고 하자

---

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate()는 성능 최적화를 위한 메서드이다.
현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지에 대한 여부를 React가 알 수 있다.

state 또는 props가 새로운 값으로 변경되어서 렌더링이 발생하기 직전에 호출된다. 기본값은 true이다.

---

render

#1을 참고 하자

---

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()는 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되었을 때에 호출된다.

이 메서드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있다.
이 생명주기가 반환하는 값은 componentDidUpdate()에 인자로 전달된다.

채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있습니다.

---

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate()는 업데이트가 일어난 직후에 호출된다. 최초 마운트 될 때는 실행되지 않는다.

componentDidUpdate()를 이용할 때, setState를 주의해야 한다.
조건문 등으로 제어해두지 않으면 무한 루프에 빠질 수 있기 때문이다.

---

언마운트(제거, Unmount) 이벤트

해당 컴포넌트가 DOM상에서 제거될 때, 언마운트 이벤트가 발생한다.

컴포넌트가 업데이트 될 때, 다음 메서드가 실행된다.

---

componentWillUnmount

컴포넌트 마운트가 해제되어, 최종적으로 제거가 되기 전 실행이 된다.
컴포넌트 내에서 이루어지는 네트워크 요청, 타이머 이벤트 등 지속적으로 이루어지는 이벤트들을 해제하는데 유용하게 사용된다.

이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출하면 안 됩니다.
컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않습니다.

---

참고 or 참고하면 좋은 글

React Life Cycle 시리즈(Mount 편)

 

React.Component – React