[리액트 기초]State-리액트의 불변성

 

 

1.불변성(Immutable)

불변성이란 이름 그대로 변하지 않는 성질을 말한다. 값이나 상태를 변경 할 수 없다는 것을 의미하는데, 

자바스크립트에는 원시타입(Primitive Type)과 객체타입(Object Type)이 존재한다.

원시 타입은 불변성을 갖고, 객체타입은 변경가능한 값들이다. 다음 예제를 보고 불변성이란 의미를 알아보자

(*원시타입과 객체타입의 콜 스택과 힙 메모리에 대한 내용은 포함하지 않고 있다)

let primitive = 'a';
primitive = 'b';
console.log(primitive) // 'b'

이렇게 원시타입인 string을  primitive 라는 변수에 할당을 해주면 메모리에 저장된다.

불변성을 갖는 원시타입의 데이터인데, primitive = 'b' 라고 값을 재할당 하고 확인해보면 값이 변하는 것을 확인 할 수 있다.

원시 타입이 불변성을 갖는다고 했는데, 값이 어떻게 변한걸까?

실제로는 값b가 a를 대체한게 아니라 a는 유지하고 b를 메모리에 새롭게 할당한 것이다.

메모리 추가요

 

그렇다면 객체타입을 확인해보자.

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

array = [1,2,3,4]

 

이런 느낌..

먼저 배열을 선언해서 메모리에 올려놨다. 그리고 불변성을 지켜주지 않는 push를 사용해서 원본데이터를 수정했다.

마지막은 원본 배열을 수정하지 않고, 새 참조값을 가진 새로운 배열로 할당하여 불변성을 지켜줬다.

결국 불변성이라는 것은 메모리 영역에서의 값이 변하지 않는다는 것을 의미한다.

 

---

2.리액트의 불변성

추가에 민감한 리액트..

리액트에서 상태를 변경하기 위해 불변성을 깨고, 직접 값을 변경한다고 한다면 화면에는 아무런 변화가 없을 것이다.

왜냐하면 리액트는 이전 참조값과 현재 참조값을 비교하여 상태 변화를 감지한다.

이 참조값이라는것은 객체를 만들면 고유한 참조값이 생성된다.이러한 이유로 리액트의 상태는 기본적으로 불변성을 갖도록 만들어야 한다.

상태를 변경해야 한다면 새로운 값을 반환해야 한다. 그래서 원본 데이터를 건드리지 않는 즉, 불변성을 깨지 않고 새로운 배열을 반환하는 스프레드 연산자(...)나 map 등의 메소드를 활용하여 불변성을 유지하는 것이다. 

const [user,setUser] = useState({
	id:'user1',
    nickname:'김귤',
})

setState(prevState => ({...prevState,nickname:'제주감귤'}))