리액트에서의 불변성

[ghdtjgus76]

불변성

불변성은 값이나 상태를 변경할 수 없는 것을 의미함

리액트에서의 불변성

리액트에서 불변성을 지키는 이유는 상태 업데이트를 하는 원리 때문임
리액트는 상태 값 업데이트 시 얕은 비교를 수행함
객체 속성 하나하나를 비교하지 않고 참조값만 비교해서 상태 변화를 감지함
상태 변화를 감지하기 위해서는 배열이나 객체와 같은 참조 자료형은 새로 생성해서 새로운 참조값을 만들어야 함

불변성을 지키면, 원본 데이터를 직접 수정하지 않고 복사본을 만들어 수정하기 때문에 사이드 이펙트 또한 방지할 수 있음

동일한 객체에 대해서, push, pop과 같은 메서드를 사용하게 되면, 이는 새로운 참조값이 만들어지지 않기 떄문에 리렌더링이 되지 않게 됨

리액트에서 요구하는 불변성을 지킬 수 있는 방법은 아래와 같음

• Object.assign 메서드 사용

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1, { b: 3 });

console.log(obj1);  // { a: 1, b: 2 }
console.log(obj2);  // { a: 1, b: 3 }

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);

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

• spread 연산자 사용

const obj1 = {
  name: 'a',
  price: 1000
}

const obj2 = { ...obj1, price: 2000 }

console.log(obj1);  // { name: 'a', price: 1000 }
console.log(obj2);  // { name: 'a', price: 2000 }

참고 자료

https://velog.io/@jma1020/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%B4%EB%9E%80

[gs0428]

Object.assign이 스프레드 연산자보다 성능이 좋을까요?

[ghdtjgus76]

Object.assign
첫 번째 인자에 두 번째 인자 값을 덮어씌운 후 수정된 객체 값이 리턴됩니다.
그래서, 아래 예시에서 obj1 값이 원본 객체값 대신 obj2 속성 값으로 달라진 것을 볼 수 있습니다.
obj1은 obj3와 같은 객체를 참조하게 됩니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 2, b: 3 };
const obj3 = Object.assign(obj1, obj2);

console.log(obj1);  // { a: 2, b: 3 }
console.log(obj2);  // { a: 2, b: 3 }
console.log(obj3);  // { a: 2, b: 3 }
console.log(obj3 === obj1);  // true
console.log(obj3 === obj2);  // false

이때 Object.assign은 얕은 복사 방식으로 동작합니다.
새로운 객체를 생성해서 그 안에 속성들을 복사하는데, 복사된 객체 속성들 중 객체나 배열과 같은 참조 타입이 있다면 참조만 복사되어 복사본과 원본이 같은 배열을 참조하게 됩니다.

const obj = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'cooking']
};

const copiedObj = Object.assign({}, obj);

obj.name = 'Alice';
obj.hobbies.push('gardening');

console.log(obj);        // { name: 'Alice', age: 30, hobbies: ['reading', 'cooking', 'gardening'] }
console.log(copiedObj);  // { name: 'John', age: 30, hobbies: ['reading', 'cooking', 'gardening'] }

이런 방식으로 동작하기 때문에 실수로 기존 객체를 변경시키는 일이 발생할 수 있으니 주의해야 합니다.

참고 자료
https://velog.io/@2pandi/Object.assign-%EC%82%AC%EC%9A%A9%EB%B2%95

[ghdtjgus76]

spread 연산자
spread 연산자는 1 depth까지만 깊은 복사로 작동합니다.

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

console.log(obj1);  // { a: 1, b: 2 }
console.log(obj2);  // { a: 2, b: 3 }
console.log(obj3);  // { a: 2, b: 3 }
console.log(obj3 === obj1);  // false
console.log(obj3 === obj2);  // false

const originalObj = {
  name: 'John',
  hobbies: ['reading', 'cooking']
};

const copiedObj = { ...originalObj };

copiedObj.hobbies.push('gardening');

console.log(originalObj);  // { name: 'John', hobbies: ['reading', 'cooking', 'gardening'] }
console.log(copiedObj);     // { name: 'John', hobbies: ['reading', 'cooking', 'gardening'] }

Object.assign은 대상 객체(첫 번째 인자)를 직접 변경하는 반면, spread 연산자를 사용한 경우 새로운 객체를 생성해 원본 객체를 변경하지 않습니다.
둘 다 얕은 객체를 사용한다는 공통점이 있지만, 위와 같이 원본 객체를 변경하지 않는다는 점에서 스프레드 연산자가 조금 더 안정성이 있을 수 있습니다.

만약, 불변성을 지켜야 한다면 Object.assign의 첫 번째 인자에 빈 객체를 전달해야 합니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 2, b: 3 };
const obj3 = Object.assign({}, obj1, obj2);

console.log(obj1);  // { a: 1, b: 2 }
console.log(obj2);  // { a: 2, b: 3 }
console.log(obj3);  // { a: 2, b: 3 }
console.log(obj3 === obj1);  // false
console.log(obj3 === obj2);  // false

[ghdtjgus76]

작은 규모의 앱에서는 주로 성능이 비슷하지만, 큰 규모라면 Object.assign이 스프레드 연산자보다 조금 더 나은 성능을 보여주는 것 같습니다.

아래 자료를 참고해주시기 바랍니다.
https://measurethat.net/Benchmarks/Show/2136/0/javascript-spread-operator-vs-objectassign-performance
https://gist.github.com/syaau/e9b991e55aed8c249fa5a86511f77ca5
https://www.measurethat.net/Benchmarks/Show/9286/0/objectassign-vs-spread-vs-extend

[ghdtjgus76]

이런 성능 차이가 발생하는 이유는 두 연산자가 다른 방식으로 동작하기 때문인데,
스프레드 연산자는 객체나 배열의 요소를 복사할 때 반복문을 사용해 각 요소를 하나씩 복사합니다.
객체 크기가 커질수록 반복문 실행 횟수가 늘어나게 됩니다.
Object.assign은 단일 호출로 모든 속성을 복사합니다.
내부적으로는 반복문을 사용해 각 속성을 복사하고 새로운 객체를 생성합니다.
그래서, 큰 객체인 경우, 단일 호출로 처리하는 Object.assign이 보다 나은 성능을 보여줄 수 있습니다.