리액트 불변성

Chori·2022년 8월 19일
1

React

목록 보기
5/5
post-thumbnail

리액트 불변성

원시타입과 참조타입

  • 원시타입은 불변적이나, 참조타입은 가변적이다.

원시타입(불변성o) - 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당
참조타입(불변성x) - 데이터 크기가 정해지지 않고, Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되고 변수에 heap메모리의 주소값이 할당.

불변성을 지켜야 하는 이유

  1. 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경된다. 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있다.
  2. 리액트에서 화면을 업데이트 할 때, 불변성을 지켜 값을 이전 값과 비교한 뒤 변경된 사항을 확인하고 업데이트 한다.

불변성 지키는 방법

참조타입은 값을 변경할 때 Call Stack 주소 값은 같은데, Heap메모리 값만 변경하기 때문에 불변성을 유지 할 수 없다. 때문에 새로운 배열을 반환하는 메소드를 사용해 불변성을 유지한다.

메소드
spread operator, map, filter, slice, reduce

const array = [1,2,3,4];
const sameArray = array;
sameArray.push(5);
console.log(array === sameArray); // ture

const array = [1,2,3,4];
const differentArray = [...array, 5];
console.log(array === differentArray); //false

push는 불변성을 유지할 수 없다.

profile
꾸준한 성장

0개의 댓글