React의 불변성이란 무엇인가?

React의 불변성

"불변성의  의미는 메모리 영역에서 값을 변경할 수 없다는 의미입니다."

 

간단 설명

let string = 'data1'	// 1. string: 'data1'가 메모리 1에 등록됩니다. 
string = 'data2'	// 2. string: 'data2'가 메모리 2에 등록됩니다.

 

위 예시에서 메모리 영역을 총 2개 사용합니다. 변수 string은 'data1' 였고, 여기에 'data2'를 재할당하였는데

기존 메모리 영역 1에 있는 'data1'의 값은 그대로 두고, 메모리 영역2에 'data2'를 새로 할당했습니다.

즉, 메모리영역에서 'data2'는 'data1'을 대체하는 것이 아니라 새로운 영역에 할당됩니다. 이것이 불변성입니다. 

 

 

왜 React에서 불변성을 지켜야 하나

리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문입니다.

리액트는 상태값을 업데이트 할 때 얕은 비교를 수행합니다.

즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지합니다. 이런 이유로 배열이나 객체를 업데이트 할때 setState([...state, newState]), setState({...state, [key]: value}) 이런식으로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 합니다. 이런 행위가 불변성을 지켜주는 것입니다.

 

외부에 존재하는 원본데이터를 직접 수정하지 않고, 원본데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있습니다. 다시 반대로 생각해보면 외부의 값을 함부로 변경할 수 있는 것은 위험한 일입니다.

만약 다른 어떤 곳에서 원본데이터를 사용하고 있다고 하면 어플리케이션 어딘가에서 사이드 이펙트가 일어날 가능성이 있기 때문입니다. 결국 리액트는 불변성을 지킴으로 인해 효과적인 상태 업데이트와 사이드 이펙트를 방지하는 이점들을 얻고 있습니다.

 

 

어떻게 불변성을 지키는가?

spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용하면 됩니다.

 

 

 

 

 

참고 : https://hsp0418.tistory.com/171