[리액트] shallow compare?

배경

리액트 공식 문서 -> pureComponent 설명할 때 shouldComponentUpdate() 함수가 나온다. 이 함수가 얕은 비교를 수행한다.

정리

얕은 비교(shallow compare)란 참조 타입의 출처가 변했는지만 확인하는 것을 의미한다. 가령 object 타입일 경우, 내부 값이 변동된다고 해도 출처(메모리 주소)가 변동되지 않았다면 얕은 비교로는 동일하다고 나온다.

• https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react

// 예시 객체
user = {
  name: "John",
  surname: "Doe"
}

// 객체의 데이터값은 변했지만 동일하다고 판별
const user = this.state.user;
user.name = "Jane";
console.log(user === this.state.user); // true

// 객체의 데이터값은 같지만 다르다고 판별
const user = clone(this.state.user);
console.log(user === this.state.user); // false

출처(메모리 주소)는 얕은 복사와도 관련이 깊으므로 이참에 원시타입, 참조타입의 특징을 다시 확인해보면 좋을 것 같다!