React 기초 - 3

구조 분해 할당

배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있게 하는 JS표현식

객체 구조 분해 할당

• 깊게 들어간 객체 구조 분해 할당
  

배열 구조 분해 할당

• 생략
  

• 다른 이름 변수명 사용
  

---

불변성

불변성이랑 사전적 의미로는 값이나 상태를 변경할 수 없는 것

• JS는 원시 타입에 대한 값을 저장하기 위해 Call Stack 메모리 공간 사용

• 하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간 사용

  • 이 경우 Call Stack은 개체 및 배열 값이 아닌 Heap 메모리 참조 ID를 값으로 저장

• 원시 타입

  • 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당

• 참조 타입

  • 데이터의 크기가 정해지지 않고 Call Stack 메모리에 저장
  • 변수에 heap 메모리의 주소값 할당

• 불변성을 지키는 방법

  • 아예 새로운 배열을 반환하는 메소드 사용
    • spread operator, map, filter, slice, reduce

---

전개 연산자

특정 객체 또는 배열의 값을 다른 객체, 배열을 복제하거나 옮길 때 사용

• 연산자 모양

  • ...

배열 조합

• 그냥 push 사용 시 배열 내부에 배열이 들어감
• concat 사용 시 기존 배열을 사용하지 않고 새 배열을 만들어 반환
• 기존 배열에 추가하고 싶으면 push.apply 사용

객체 조합

• 객체 자체가 들어감
  

• 객체 자체가 아닌 각각의 값이 할당됨

기존 배열 보존

• 원본 배열까지 역순으로 변경됨

• 원본 배열 유지 -> 불변성 유지