불변성을 지킨다는 것은, 데이터의 원본이 훼손되는 것을 막는 것입니다.
움직일 필요가 없는 부분은 확실하게 보존되어야 할 필요가 있습니다.
불변성을 지키면 데이터의 흐름을 신뢰할 수 있게 되며, 의도하지 않은 사이드 이펙트를 방지할 수 있게 됩니다.
이는 어플리케이션에 대한 신뢰성으로 이어집니다.
객체는 값 자체를 property를 통해 바꿀 수 있다는 특징을 가지고 있습니다.
그림처럼 let b에 a를 할당하면, b는 a의 주소를 가리키게 됩니다.
let a = {name: 'Lee'};
let b = a;
b.name = 'Kim'
console.log(a); // {name: 'Kim'}
console.log(b); // {name: 'Kim'}이렇게 b의 property를 바꾸어주면 a의 값도 바뀌게 됩니다.
위 같은 객체의 특징 때문에, 불변성을 유지하기 위해서는 값은 같지만 원본 객체와 주소가 완전히 다른 복사를 할 필요가 있습니다. 이를 깊은 복사라고도 합니다.
다양한 방법이 있지만 몇 가지를 이야기해보겠습니다.
1. Object.assign()
const obj2 = Object.assign({}, obj1)처럼 첫번째 인자로 빈 객체를 주면 뒤에 오는 obj1과 병합하여 새로운 객체를 반환하게 됩니다.
주의할 점은 객체 안에 또 다른 객체를 가지는 중첩 구조를 가진 객체라면, 참조값이 끊어지지 않은 얕은 복사가 된다는 점입니다.
2. JSON.parse 와 JSON.stringify
const user2 = JSON.parse(JSON.stringify(user));객체를 json 문자열로 변환하는 과정에서 원본 객체와의 참조가 끊어집니다.
간단하지만, 다른 방법에 비해 느리며, 객체가 함수일 경우 undefined로 처리되는 단점이 있습니다.
3. lodash 라이브러리 cloneDeep()
const obj1 = { name : 'Kim' }
const obj2 = lodash.cloneDeep(obj);lodash 라이브러리에 의존하게 되지만, 간단하게 깊은 복사를 할 수 있습니다.
리액트를 공부할수록 자바스크립트라는 언어의 기본기가 얼마나 중요한지 깨닫게 됩니다.
그 때는 당연히 공부했던 것이 지나고 보니 가장 중요한 핵심이라서 계속 돌아와서 공부하고 있습니다!ㅋㅋㅋ 얼마나 재밌고 웃긴지 몰라요.
이런 과정을 반복하며 탄탄한 지식을 얻게 되는 거겠죠! 열심히 부딪혀 봐야겠습니다.
