2022.09.28 꼬꼬코 전개 연산자(...문법)와 얕은 복사(shallow copy)

1. 전개 연산자(...문법)를 사용하여 객체나 배열 내부의 값을 복사할 때는, 얕은 복사(shallow copy)를 하게 된다. 

얕은 복사란?

Call by Refrence~ 즉 주소값만 복사하여 레퍼런스 변수가 서로 같은 객체나 배열을 가리키게 만드는 것! 

2. 얕은  복사를 하게 되면, 가장 바깥쪽에 있는 값만 복사된다. 

3. 따라서 업데이트하고 싶은 값의 내부의 값이 객체 혹은 배열이라면,

 

const todos = [{ id : 1, checked: true}, { id : 2, checked: true }];  
const nextTodos = [...todos];

 

내부의 값을 !!따로!! 복사해 주어야 한다. 

nextTodos[0] = {
...nextTodos[0], 
checked: false // 배열 내부의 값을 수정해야 하므로, ...nextTodos[i] 값을 따로 또 복사해 주어야 함.
}; // 새로운 객체 할당

따라서 만약 객체의 경우에도, 객체 안의 객체에 불변성을 지키며 새 값을 할당해야 하는 경우, 

const nextComplexObject = {
	...complexObject,
    objectInside: {
    	...complexObject.objectInside, // 객체 속 객체를 따로 복사
        enabled: false //객체 속 객체 내부의 값에 새로운 값 할당 
        }
};

위와 같이 객체 속 객체를 따로 복사해 주어야 한다!!