리액트에서의 불변성

불변성이란?

한번 생성된 원본의 데이터는 변경시키지 않고, 데이터 변경 시 새로운 원본을 만드는 디자인 패턴!

불변성이 없다 = 원본데이터가 바뀔수 있다 = mutable하다
ex) 배열의 push 메소드 -> 원본 배열에 push하여 원본배열의 값 자체를 변경시킨다.

불변성이 있다 = 원본 데이터가 변할 수 없다 = immutable하다
ex) 배열의 map 메소드 -> 새로운 배열을 리턴한다.

리액트에서는 state 변경 전 후 값을 '얕은 비교'하여 다른 경우 리렌더링을 한다
얕은 비교라는 것은 주소값과 관련이 있다.
객체에 직접 접근해서 값을 바꾸어도 state의 주소값은 바뀌지않는다.
그래서 리렌더링이 일어나지 않을 수 있다.
또한 객체의 값에 직접 접근해서 데이터를 변경할 경우 이 객체와 연결되어 있는 다른 데이터들에 오류가 발생할 수 있다.

불변성을 지키는 수단(해결하는 방법)

spread operator

const [obj, setObj] = useState({
	name: "James",
	age: 30
})

const increaseAge = () => {
	setObj({...obj, age: obj.age + 1});
	// setObj({name: "James", age: 30, age: obj.age + 1});
}

원래배열을 spread하여 복사한 뒤 값을 변경한다! 새로운 객체로 반환!

하지만 이 방법도 depth가 깊은 중첩 객체에서는 사용하기 힘들다.

https://doesitmutate.xyz/

함수가(우리가 흔히 사용하는 map, filter, push등) 불변한지 불변하지 않은지 알 수 있는 사이트이다.
불변성을 확인하여 원본 객체가 바뀌지 않게 해야한다.