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 불변성이 중요한 이유

1. 리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문이다.
2. 리액트는 상태값을 업데이트 할 때 얕은 비교를 수행한다.
   즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지한다.
3. 이런 이유로 배열이나 객체를 업데이트 할때 setState([...state, newState]), setState({...state, [key]: value}) 이런식으로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 한다.
4. 외부에 존재하는 원본데이터를 직접 수정하지 않고, 원본데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있다.

• 리액트는 불변성을 지킴으로 인해 효과적인 상태 업데이트와 사이드 이펙트를 방지하는 이점들이 있다.

불변성을 지키는 방법

• 참조타입을 변경하는 것이 아닌, 새로운 배열을 반환하는 메소드를 사용
• 스프레드 문법, map, filter, slice, reduce 등
• 원본 데이터를 변경하는 메소드 : splice, push
  <예시>

// 원시타입
const [number, setNumber] = useState(0)
setState(1)
 
// 참조타입
const [numberarray, setNumberarray] = useState({1, 2, 3, 4})
setState({...numberarray, 5}