렌더링 이해하기 - 얕은 비교 (Shallow Equal) , 깊은 비교 (Deep Equal)

얕은 비교 Shallow Compare란?

숫자, 문자열 등 원시 자료형은 값을 비교한다.

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

const obj1 = {a : 1, b : 2};
const obj2 = {a : 1, b : 2};

console.log(obj1 === obj2); // fasle

 

obj1과 obj2에 들어있는 값은 같지만, 참조 값을 비교하기 때문에 obj1과 obj2의 참조 값이 달라 false가 반환된다.

user = {
	name : "devbean",
    surname : "Ohh"
}
const user = this.state.user;
user.name = "hb"

console.log(this.state.user === user);

사용자 이름이 변경된 것을 알 수 있다.

불변성을 깼음에도 불구하고 참조 값은 같기 때문에 참조는 동일하다.

const clone = Object.assign({}, ...obj);
const user = clone(this.state.user);
console.log(user === this.state.user); // false

객체 속성을 변경하지 않고 완전히 다른 , 원본 객체를 복사하여 다른 참조로 새 복사본을 만들어야 한다.

728x90

깊은 비교 Deep Compare 란?

얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교합니다. 깊은 비교 방법은 아래를 참고해 주세요.

1. Object depth가 깊지 않을 경우 : JSON.stringify() 사용

2. Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용

const obj1 = {a : 1, b : 2};
const obj2 = {a : 1, b : 2};

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

깊은 비교 예시

얕은 비교를 사용할 때                                          참조 ) 리액트가 리 렌더링 되는 경우

1. React.memo()에서 props를 비교할 때                                 - state 변경이 있을 때, 부모 컴포넌트가 렌더링 될 때

2. 리액트 컴포넌트가 리 렌더링을 하기 전                                    - 새로운 props가 들어올 때, sholdComponentUpdate기 true일 때

    - state 변경이 있을 때                                                            - forceUpdate가 실행될 때

    - 부모 컴포넌트가 렌더링 될 때