불변성 지키기

리액트에서 불변성을 지켜야 하는 이유는? 🤔

👉 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있다.

 

👉 리액트에서 화면을 업데이트할 때, 이전 값과 바뀐 값을 비교해서 달라진 부분이 있으면 렌더링을 해야하는데, 원본 데이터가 수정되어 버리면 비교 대상이 없어지게 된다. 그러므로 불변성을 지켜줘야 한다.

 

불변성을 지키는 방법 😊

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

새로운 배열을 반환하는 메소드

spread operator, map, filter, slice, reduce

원본 데이터를 변경하는 메소드

splice, push

const array = [1,2,3,4];
const sameArr = array;
sameArr.push(5);

console.log(array === sameArr) // true

const array = [1,2,3,4];
const differentArr = [...array, 5], //spread operator를 사용하여 array 배열 복사 후 값 할당
console.log(array === differentArr) // false

---

[출처] 인프런 '따라하며 배우는 리액트 A-Z' 강의를 보고 정리한 내용입니다.