김민태의 데브캠프 2기 - 리액트 프로파일러로 성능 비교하기 3

이전 시간에서, React는 랜더링이 일어날 때 랜더링하는 컴포넌트의 props가 같다면, React는 메모이징의 내용을 재사용한다고 했다.

 

그렇다면 React는 어떻게 props의 값을 이전 값과 비교할까?

 

얕은(shallow) 비교를 한다.

얕은 비교란..

숫자, 문자열 등 원시 자료형은 값을 비교
배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교

얕은 복사, 깊은 복사를 생각하면 편하다.

얕은 비교를 사용하는 경우
1. React.memo()에서 props를 비교할 때
2. 리액트 컴포넌트가 리 랜더링을 하기전
-state 변경이 있을 때
- 부모 컴포넌트가 랜더링 될 때

참조) 리액트가 리랜더링 되는 경우
- state 변경이 있을 때
- 부모 컴포넌트가 랜더링 될 때
- 새로운 props가 들어올 때
- shouldComponentUpdate에서 true가 반환될 때
- forceUpdate가 실행될 때