728x90
반응형
# spread 연산자 (... 연산자)
- Spread라는 단어의 의미는 펼치다, 퍼뜨리다 이다.
- 이 연산자를 사용하면 객체나 배열을 펼칠 수 있다.
- React 에서 기존의 것을 건들지 않고, 새로운 객체/배열을 만들 때 사용 가능하다. (React의 불변성 유지)
Spread 연산자를 이용한 배열 복사하기
// Spread 사용 예) 객체의 경우
const a = [
{ id: 1, checked: true },
{ id: 2, checked: true },
];
const b = {
...a,
};
위 결과 값을 살펴보자.
console.log('a : ', a);
console.log('b : ', b);
console.log('a === b : ', a === b);
console.log('a[0] === b[0] : ', a[0] === b[0]);
배열과 객체는 reference type으로 실제 값이 아닌, 실제 값이 저장된 메모리 주소를 가리킨다.
따라서, b의 경우 a가 가르키고 있던 0x9323을 동일하게 가르키게 되고, a와 b는 동일한 값을 보고있다.
따라서, a와 b가 갖고있는 각각의 주소값은 다르므로 a===b는 false
그 안에 요소는 같은 값을 바라보고 있으므로 a[0]===b[0]은 true의 결과가 나온다.
이 때, b[0]의 checked 값을 변경하면?
a[0]의 checked 값도 false로 바뀌었다.
즉, ... 연산자를 사용하여 객체나 배열 내부의 값을 복사할 때는 얕은 복사(shallow copy)를 함을 알 수 있다.
그럼, 완전히 새로 복사하기 위해서는? 내부의 값 또한 따로 복사해주어야 한다.
b[0]의 경우 deep copy(새로운 메모리 주소를 만들어서 복사)됨을 확인할 수 있다.
b[0] = {
...b[0], //기존에 있는 내용을 복사하여 넣기
checked: false, //새로운 값 덮어쓰기
};
위는 b[0]이 가르키고 있는 데이터를 따로 복사하여 변경해준 결과이다. 아예 새로운객체를 할당한 것이다!
불변성을 지키며, 새 값을 할당하는 방법이다.