자바스크립트에서 불변성은 : 메모리 값을 변경할수 없는 것 의미다.
얕은 복사 와 깊은 복사가 있다
얕은 복사는 객체 a.b 가 있으면 데이터의 주소를 똑같이 참조 하고 있음
a객체에 접근헸음에도 b객체의 값이 달라지는 것 (참조타입 객체 예시를 생각하면 쉽다)
생략...
깊은 복사는
아예 새로운 객체 안 속성 (property) 만 복사해서 사용하는 것 이다.
spread 연산자를 사용하여 { ... x} 불변성을 유지시킨다.
React에서 state 의 변화값을 비교하는 데에서는, 불변성을 지켜주어야 변경됨을 인지한다
React의 함수형 프로그래밍에서 사용되는 순수함수는,
동일한 값을 인풋하였을 때 동일한 값을 아웃풋하는 함수를 뜻하며,
외부의 값을 변경하는 것과 같은 사이드 이펙트를 막는 함수이다
즉, 객체의 참조 주소값만 변경되었는지 확인함으로써 계산 리소스를 줄여준다
이를 방지하기 위해
spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용하여 setState를 실행한다
-참조한 사이트 -
'Coding 🖐🏻 > React' 카테고리의 다른 글
| 리액트 3. 번들러 ,웹팩,웹팩 로더 , JSX (2) | 2023.06.18 |
|---|---|
| 리액트 2. props , 불변성, 불변성을 지켜야 하는 이유 (1) | 2023.06.18 |
| 리액트 1. 리액트 이해, 초기렌더링, render함수 ,DOM,리렌더링, Virtual DOM 뭔지 용어 (반복학습) (0) | 2023.06.18 |
| todo 투두앱 만들기 react app (2) | 2023.02.04 |
| Redux 왜 사용하는가? 리덕스 사용 (1) | 2022.10.14 |