TIL 14 React 불변성

1.  불변성이란?

 

let string = '첫번쩨' // 1. string: '첫번째'가 메모리 영역1에 등록. 
string = '두번째' // 2. string: '두번째'가 메모리 영역2에 등록.

 

문자열은 값을 바꾸게 되면 '첫번째'라는 문자열이 할당된 주소1이랑 바꿔준 '두번째' 주소2가 달라진다.

리액트내에서 state값이 변경되면 랜더링이 일어나는데 이는 메모리영역의 값이 바뀐걸 인지를 해서 되는 과정이다.

 

2.  배열 객체는?

리액트 state값중 배열이나 객체 내부의 값이 변경되면 render이 일어나는데 만약 state에 있는 원본배열에다가 그대로 값을

변경하고 state값을 갱신해주면 react내에서 객체 또는 배열의 값이 어디가 변경됐는지 일일이 다 확인을 한 후 랜더링이 일어난다.

이는 데이터 커지게되면 상당히 비효율적이고 원본 데이터가 변경될 경우, 이 원본데이터를 참조하고 있는 다른 객체에서 예상치 못한

오류가 발생할 수 있다. 그래서 배열이나 객체를 복사를 한 후 그 복사한 객체 배열을 조작한 후 setState로 값을 할당해줘야한다.

 

 

위 코드는 변수 arr2에다가 arr1의 배열을 스프레드 문법으로 복사를 한 후 할당한 코드다. 분명 내부 값은 동일하지만 비교를 해보면

false를 리턴한다. 이는 자바스크립트에서 배열이나 객체를 비교할때 내부 값이 아닌 해당 변수의 메모리 주소가 같은지 다른지 

비교를 하게된다. 그래서 리액트에서 복사를 한 후 변경된 값을 할당해주면 내부 값을 비교할 필요도 없이 바로 메모리 주소가 달라진걸

인식을 해서 갱신을 해주게 된다. 이는 리액트가 효율적으로 업데이트 할 수 있게 도와준다.

 

3.  복사하는 방법은?

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

setState를 이용할 때 원시타입(문자열, 숫자, Boolean등) 경우에는 값을 바로 넣어주어도 되지만 참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 합니다.