[0617] 불변성

불변성

메모리에 있는 값을 변경할 수 없는 것

불변성 O : 메모리에서 값이 바로 바뀌지 않고 새로운 주소에 값을 저장한 후 그 주소를 가리키도록 함
불변성 X : 메모리에서 값이 바로 바뀜

리액트에서 불변성 유지가 중요한 이유

useState는 주소값의 변경을 감지하여 변경 여부를 확인하므로 불변성 유지가 필요하다.

원시 데이터를 변경하는 경우에는 불변성이 유지가 되므로 괜찮지만, 원시 데이터 외의 배열이나 객체 등을 변경하는 경우에는 조심해야 한다.

---

불변성이 깨지는 경우

import { useState } from "react";

function App() {
  const [arr, setArr] = useState([0]);

  const handleButtonClick = () => {
    arr.push(arr.length);
    setArr(arr);
  };

  return (
    <div>
      <div>{arr.toString()}</div>
      <button onClick={handleButtonClick}>
        배열에 추가하기
      </button>
    </div>
  );
}

export default App;

이 페이지에서는 버튼을 눌렀을 때 push를 이용하여 배열에 값을 추가하는 handleButtonClick 함수를 실행한다.

버튼을 클릭해도 아무일도 일어나지 않는다.

push를 이용하여 배열을 변경하면 같은 주소를 가리키고 값만 바뀌는 것이므로 불변성을 깨뜨리기 때문에 state 변화를 감지하지 못해서 값이 변경되지 않고 리렌더링도 되지 않는 것이다.

불변성 유지하는 방법

spread operator나 map, filter 등을 사용하여 배열을 변경하는 경우, 새로운 주소에 새로운 값을 저장한 후 새로운 주소를 가리키기 때문에 불변성이 유지된다.

const handleButtonClick = () => {
  setArr([...arr, arr.length]);
};

따라서 handleButtonClick 함수를 spread operator로 수정하는 경우 잘 동작한다.

---

불변성을 지켜야 하는 이유

• 예측 불가능한 코드 : 지켜지지 않으면 a와 b가 같은 주소를 가리킬 때 a의 값이 바뀌는 경우 b도 바뀜
• 원본 데이터가 어디서든 변경된다면 어떤 코드가 변경했는지 찾기 어려워진다