231106 TIL

불변성 IMMUTABILITY

거 단어 한 번 거창하다.
불변, 변하지 않는 성질? 대충 그런 느낌인 것 같은데?

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 칭함.

자바스크립트의 데이터 형태 중에서 원시 데이터는 불변성이 있고,
원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다고 한다.

아니, 그래서 이게 지금 배우는 React에서 왜 중요한 걸까?

React에서는 화면을 Rerendering을 할지, 말지에 대한 여부를 결정할 때, State의 변화를 확인한다.
State가 변화했다면 Rerendering을 진행하는 것이고, State가 변하지 않았다면 진행하지 않는다.

헌데, 그 변화의 판단에서 비교 & 확인하는 것이 State의 변화 전, 후의 메모리 주소다.

만약 React에서 원시 데이터가 아닌 데이터를 수정할 때, 불변성을 지켜주지 않고 직접 수정을 가했다고 쳐보자.
그렇다면 일단 눈에 보이는 값은 바뀔지언정, 그 값이 저장된 메모리 주소는 변함이 없다.
그 말인즉슨, 개발자가 값을 직접 바꿨어도 React는 State가 변화했다고 인지하지 못해서 일어나야할 Rerendering이 일어나지 않게 되는 거다.

이것은 React에서 불변성을 유지하는 예시라고 한다.

<script>
	import React, { useState } from "react";
    
    function App () {
    	const [dogs, setDogs] = useState([말티즈]);
        
        function onClickHandler() {
            // ...(spread operator)를 이용해서 dogs를 복사.
            // 그 후에 "시고르자브르종"이란 항목을 추가.
        	setDogs([...dogs, "시고르자브르종"]);
        }
        console.log(dogs);
        return (
        	<div>
            	<button onClick={onClickHandler}>버튼</button>
            </div>    
        );
    }
    export default App;
</script>

배열을 setState 할 때, 불변성을 지켜주기 위해 직접 수정을 가하진 않지만.
그 대신 전개 연산자(...spread operator)를 사용해서 기존의 값을 복사한 뒤, 그 이후에 값을 수정하는 방식으로 구현한다.

지난 번 자바스크립트 강의에서 한 번 들었던 내용을 좀 더 심화해서 말해주신 것 같다는 생각이다.
그때 튜터님께서 그림을 그리시면서 몇 비트 얘기부터 시작해서 데이터를 저장할 때는 주소값에다가 넣어둔다, 그런 얘기도 하셨었는데.
한 번 훑어보려면 짬을 내어 거슬러 올라가야할 것 같다.
또한 어떤 느낌인지 감은 잡혔으니까, 이걸 적용시킨 사례를 보면서 혹은 코드를 손가락 끝으로 음미하면서 더 체득해봐야겠다고 느낀다.