🤹🏻 리액트가 렌더링을 실행하는 과정
1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate()를 실행하였을 때
4. 부모컴포넌트가 렌더링되었을 때1~3번의 과정을 통해 컴포넌트가 렌더링될 때, 자식컴포넌트 또한 같은 과정으로 렌더링이 진행된다. 부모컴포넌트에서 상태를 변경하고, 아무런 영향이 없는 자식 컴포넌트의 경우에도 자식컴포넌트는 렌더링을 수행한다. 이때 사용하는 것이 shouldComponentUpdate 라는 라이프사이클 메서드이다. 이 메서드를 통해 렌더링을 제어할 수 있고, 데이터가 변경되어 렌더링이 필요한 경우에만 렌더링작업을 수행할 수 있다.
🤹🏻 최적화하는 방법
shouldComponentUpdate 메서드에서는 인자를 통해 변경되는 props 와 state를 받아올 수 있다. 이때 참을 반환하는 경우 렌더링을 수행하고, 거짓이면 갱신을 위한 렌더링을 수행하지 않는다. 만일, 변경되는 데이터가 모두 원시값이거나 각각의 불변성을 보장할 수 있다면 React.PureComponent를 사용할 수 있다. (React.Component는 shouldComponentUpdate가 미리 적용되어 있는 컴포넌트) 불변성이 중요한 이유는 얕은 비교를 통해 컴포넌트의 렌더링을 결정하기 때문에 넘겨받는 Props, 사용하는 State를 잘 확인해야한다.
🍒 원시값이란
원시타입은 변수에 값을 재할당해도 값이 변하지 않음. 상태(state)를 바꾸는 과정에서 참조변수를 불변성을 유지하지 않고 바로 수정해버리면 (push() 과 같이) 기존 상태도 수정이 되므로 이전 state와 비교하는 것이 불가능해짐.
🍒 얕은 비교
props 와 state 의 이전 값과 바뀔 값을 비교할 때, 얕은 비교를 수행하게 되는데, 원시형 값에 있어서는 같은 값을 가지는지 확인하게 된다.
(예: 1은 1과 같고, true는 true와 같은 것처럼.)
그리고 object와 array와 같은 값에 있어서는 참조하고 있는 객체가 같은지 확인한다.
부모 컴포넌트에서 순수 컴포넌트인 자식 컴포넌트의 props 로 제공되는 object나 array를 직접 변경했다고 해도 당신의 “순수” 컴포넌트는 업데이트 되지 않는데, 이는 순수 컴포넌트가 object나 array에 있어서는 이전 값과 레퍼런스를 비교하기 때문이다!
🤹🏻 Hook에서의 최적화
Hook에서는 shouldComponentUpdate와 React.PureComponent의 역할을 해주는 useMemo()가 있다. useMemo()를 이용해 props를 넘겨줄 수 있다. useCallback()은 함수를 가져올 수 있다. 차이점은 메모이제이션의 값이 변경되는 시점은 함수 인자가 아닌 의존성(dependencies)를 배열 형태로 받아서 판단을 한다.
