React Lifecycle - class & hook 2부

이전글 : 2021.12.16 - [프론트엔드/React] - React Lifecycle - class & hook 1부

React Lifecycle - class & hook 1부

 

class - update

리액트의 클래스 컴포넌트의 업데이트를 처리하는 호출 순서는 아래와 같습니다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

static getDerivedStateFromProps() 에 대해서는 1부에서 다루었던 내용이라 여기선 건너뛰겠습니다. 

컴포넌트에서 업데이트가 발생하는경우는 state 또는 props 에 대해서 변경사항이 발생했을 때 입니다. 상태의 변경이 발생하면 리렌더링을 통해서 변경사항을 화면에 보여주어야 합니다. 

 

shouldComponentUpdate() - 덜 중요함

해당 메소드는 state 나 props 가 갱신되어 렌더링이 발생하기 직전에 호출됩니다. 기본값은 true 이고 false 일경우 상태의 갱신에 상관없이 렌더링을 발생시키지 않을 수 있습니다. 초기 렌더링시에는 발생하지않고 상태의 변경이 있을때에만 호출됩니다.

해당 메소드는 오직 성능 최적화 만을 위한것으로 성능최적화 목적이 아닌 렌더링방지 목적으로만 사용한다면 버그로 이어질 수 있습니다.

 

예를 들자면 우리가 컴포넌트를 조합하고 만들다보면 의도하지않게 렌더링이 여러번 발생하는 경우가 있습니다. 이때 의도하지않았고 불필요한 렌더링을 줄여 성능이슈를 해결할때 사용할 수 있습니다.

shouldComponentUpdate(nextProps, nextState)

 

다만 얕은 비교를 통해 렌더링여부를 체크하는것이 필요하다면 PureComponent 를 사용하기를 권장하고 있습니다.

왠만하면 사용을 지양하는 메소드이며 로직을 이해하는데 있어서 방해 요소가 될 가능성이높고 예상치못한 렌더링 이슈로 이어질 수 있습니다. 

 

getSnapshotBeforeUpdate() - 덜 중요함

class 컴포넌트를 사용하면서도 한번도 사용해 본적 없었던 메소드인것같습니다. 

해당 메소드에 대한 설명은 공식문서를 참고해주세요

 

 

componentDidUpdate(prevProps, prevState)

갱신이 일어난 직후에 호출됩니다. 여기서 말하는 갱신이란 state 또는 props 에 변경사항이 발생했을때 입니다. 최초 렌더링시에는 호출되지않고 보통 상태가 업데이트 된 후 업데이트된 DOM 을 조작하기위해 활용하거나 props 를 비교하여 네트워크 요청을 보내기도합니다.

만약 해당 메소드 내에서 setState 를 사용하려 한다면 조건문을 통해서 사용해야합니다. 그냥 사용할경우 무한루프를 생성할 수 있습니다.

 

부모로부터 내려받은 props 를 state 에 그대로 저장하여 사용하는것은 지양하고 직접 props 를 사용하기를 권장합니다.

이유는 props 의 이전값이 다른지 동일한지 여부와 상관없이 상위 구성요소가 렌더링될때마다 호출되기때문에 불필요한 렌더링이 발생할 수 있고 내부 state 의 상태 업데이트가 손실될 수 있습니다.

 

---

 

hook - update