얕은 복사 vs 깊은 복사 (vue, react)

얕은 복사 vs깊은 복사

• 얕은 복사 : 참조에 의한 할당. 같은 데이터 주소를 가지고 있는것, 값을 카피하고 출력해도 동일하다.
  • 얕은 비교 : 기본 타입데이터는 값만 비교, 객체는 참조까지 비교(같은 값이더라도 false)
• 깊은 복사: 아예 새로 운 객체안에 속성만 복사해서 사용 , 다른 주소를 갖는다.
  • 깊은 비교 : 객체의 경우 값까지 비교

→ 깊은 복사 간단하게 할 수 있는 방법?

• 1depth 까지는 shallow copy , 2 depth이상이면 deep copy이다.

const JSONuser = JSON.parse(JSON.stringify(user));
const lodashUser = cloneDeep(user);

• 완벽한 deep copy를 하고 싶으면? > 재귀적으로 깊은 복사를 하던지, lodash cloneDeep사용하던지 json.parse, json.stringify()함수 등을 사용한다.
• json.parse하면 함수는 복사할 수 없기 때문에 cloneDeep을 사용하는게 좋음

<<<< 참고 >>>>

react에서 얕은 비교

state, props값 변경 여부로 인해 컴포넌트 리렌더링이 되는데 얕은 비교를 통한 리렌더링된다. 이때 불필요한 리렌더링이 발생할 수 있음

1. 상위컴포넌트의 state변경시
2. 하위 컴포넌트로 넘겨주는 props변경 될 때
3. value값은 변화가 없는데 reference값이 변화가 있어서 얕은 비교로 리렌더링 될때

이때 useCallback , React.memo를 통해 해결 가능함

vue에서 얕은 비교

vue의 data는 얕은 비교를 한다.

vue에서 watch를 사용할 때 data를 객체로 정의할경우 참조값만 비교하기 때문에 (얕은 비교) 변경이 되어도 리렌더링이 되지 않는다. 배열의 경우 splice 사용하면 새로운 주소값에 할당되므로 리렌더링이 됨