생각 정리
리액트를 공부하면서 계속 나오는 단어가 불변성이다. (프로그래밍에서 불변성이란 데이터의 원본 훼손을 막는 것을 의미) input 태그의 값을 관리할 때 value 에 state 를 연결해서 해당 setState 함수로만 인풋값을 바꿀 수 있게 했었고, state 로 만든 배열에 값을 추가할 때 push 를 사용하면 리액트 설계원칙을 위반한 것이라는 주의를 들었는데, 이런 것들이 다 불변성과 관련이 있다. 새로운 객체나 배열을 만들 때 전개구문을 쓰거나 새로운 배열을 반환하는 메소드를 사용하는 것은 원본과 다른 복사본을 만드는 것은 불변성으로 쉽게 연결 되는데, 인풋값을 state 로만 관리하는 것과 불변성의 관계는 약간 헷갈리는 느낌이다.
찾아본 것
출처 - 리액트 불변성이란 무엇이고, 왜 지켜야 할까?
리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있다. 함수형 프로그래밍의 특징 중 하나는 순수함수를 사용하는 것인데, 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수를 말한다. 동시에 순수함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻한다. 여기서 외부 값을 변경하지 않는 다는 부분이 불변성과 깊이 연괸된 부분이다.
불변성을 이해하려면 자바스크립트의 원시타입과 참조타입을 이해하는 게 좋다. Boolean, String, Number, null, undefined 등의 원시타입 데이터는 고정된 크기로 메모리에 저장되고 실제 데이터가 변수에 할당된다. 하지만 objcet, Array 와 같은 참조타입 데이터는 데이터 크기가 정해지지 않고 메모리에 저장되며, 데이터 값이 heap 에 저장되고 변수에는 heap 메모리의 주소값이 할당된다.
원시타입은 불변성을 가지고 있어서 새롭게 값을 할당해도 해당 값이 새로운 메모리 영역에 할당되는 것이지 값 자체가 바뀌진 않는다. 이것을 불변성이라고 한다. 불변성은 메모리 영역에서 값을 변경할 수 없다는 것을 의미한다. 리액트에서 불변성을 지켜주는 이유는 리액트가 상태를 업데이트하는 원리 때문이다. 리액트는 상태값을 업데이트 할 때 얕은 비교를 수행한다. 객체의 프로퍼티를 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인한다. (리액트는 얕은 비교로 계산 리소스를 줄여 효율적으로 상태를 업데이트 함)
그렇기 때문에 배열이나 객체를 업데이트 할 때 setState([...state, newState]), setState({...state, [key]: value}) 와 같은 식으로 새로운 배열이나 객체를 생성하고 새로운 참조값을 만들어서 상태를 업데이트한다.
즉 외부에 존재하는 원본데이터를 직접 수정하지 않고 원본데이터의 복사본을 만들어서 값을 사용해 예상치 못한 오류를 사전에 방지한다. 외부의 값을 함수로 변경할 수 있는 것은 위험한 일이다. (다른 곳에소 그 원본 데이터를 사용할 수 있으므로)그래서 불변성을 지키기 위해서 spread operator, map, filter, slice, reduce 등 새로운 배열을 반환하는 메소드들을 활용한다.
