구조 분해 할당이란?
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식
const week = ['Mon','Tue','Wed','Thu','Fri']
const day1= week[0]
const day2 = week[1] ~~위 코드를 구조 분해 할당으로 표현을 하면
const week = ['Mon','Tue','Wed','Thu','Fri']
const [day1,day2,day3,day4,day5] =week;이렇게 깔끔하게 표현가능하다!
day1이 Mon이 되고, day2가 Tue가 되는--
리액트 불변성
불변성이란 변화가 일어나도 원본의 데이터를 변경하지 않도록 하는 것이다.
원시 타입: Boolean, String, Number, null, undefined, Symbol
참조 타입: Object, Array
원시 타입에 대한 참조 및 값을 저장하기 위해서 고정된 크기로 call stack 메모리 공간을 사용하지만
참조 타입의 경우는 Heap을 사용 한다.
즉, 원시타입은 실제 데이터가 변수에 저장되는 것이고
참조 타입은 정해지지 않은 크기의 데이터 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당된다.
따라서 object, Array는 주소값은 그대로여도 데이터값인 value가 바뀌기에 불변성을 잘 고려해줘야한다.
그럼 대체 왜 불변성을 지켜야 하는 것인가.. 그냥 바뀌게 냅둬도 되는 거 아닌가?
No.
참조 타입에서 만약 객체 or 배열 값이 변할때 원본 데이터(value)가 바뀌기에 이 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어서 프로그래밍의 복잡도가 올라간다..
또한 화면을 업뎃할때 불변성을 지켜서 기존 값과 바뀐 값을 비교해서 확인한 후 업뎃하기에 불변성을 꼭 지켜야 하는 것이다!
그럼 어떻게 지켜줘야 하지?
바로!
아예 새로운 배열을 만들어주는 메소드를 사용하면 된다.
spread operator, filter, map 메소드가 해당되는데 그 중에 spread를 살펴보자면 다음과 같다.
const array=[1,2,3]
const ha= array;
ha.push(4)
const new = [...array,4]
console.log(array == ha) //true
console.log(array == new) //false
push 같은 경우는 원본의 데이터를 아예 바꿔버리므로 기존 배열과 비교시 true가 나온다.
하지만 ... 스프레드 연산자는 기존 데이터를 유지하기에 기존 배열과 비교시 false가 나온다.
