[React] 불변성이란?

📌 불변성 : 메모리에 있는 값을 변경할 수 없는 것.

1. 원시 데이터 : 불변하다.

• 원시 데이터 : 숫자, 문자, 불리언 등...

let number = 1;
let secondNumber = 1;

console.log(number === secondNumber); // true : 데이터타입부터 주소값까지 모든 게 다 동일하다.

1은 하나의 고유한 주소값을 가진다. 이후 1이 선언되면서, 변수는 1이 가지고 있는 고유한 주소값을 가리키게 된다.

따라서 number와 secondNumber는 동일한 1을 바라보는 같은 주소값을 가진다.

이때 number=2로 바뀌면, number가 바라보는 주소값과 secondNumber가 바라보는 주소값을 달라진다.
즉, 1과 2는 각각의 주소값을 가지고 있으며, 그 값은 변하지 않는다. = 불변하다.

2. 원시 데이터가 아닌 것 : 불변성이 없다.

• 원시 데이터가 아닌 것 : 배열, 객체, 함수...

let obj1 = {
  name: "kim",
};

let obj2 = {
  name: "kim",
};

console.log(obj1 === obj2); /// false

객체는 메모리에 obj1과 obj2 그 자체가 각각 다른 주소값을 가지며 저장된다.
즉, {name : "kim"}이 하나의 주소값이 저장되는 것이 아닌, obj1={name:"kim"}이 하나의 주소값에 저장된다.

따라서 obj1과 obj2는 같은 모습을 하고 있으나, 각각이 가지고 있는 주소값은 서로 다르다.

예를 들어, obj1은 '12345' 주소값을, obj2는 '23456' 주소값을 가지고 있다고 하자.

그럼 이때 obj1의 name의 value가 'park'으로 바뀐다면, obj1의 주소값이 바뀌는 것인가?

obj1.name='park' // 객체는 불변성이 없다.

그렇지 않다. obj1의 주소값은 동일하게 12345를 가지고 있으나, 그 내부의 value의 값만 kim -> park 으로 변하는 것이다.
즉, 객체는 그 내부의 값이 변하기도 한다. 이를 불변성이 없다라고 말한다.

🧐 그렇다면, 불변성과 렌더링은 무슨 연관이 있는가?

리액트에서 원시데이터가 아닌 데이터의 불변성을 지켜주는 것이 중요할까?

react에서 화면이 렌더링 되는 조건 ? State가 바뀐다.

화면을 렌더링 할지 말지 결정하는 것 = state가 바꼈다!

• 리엑트는 화면을 렌더링할지를 state의 변화에 따라서 결정한다. 단순 변수는 무시한다.

즉, 리엑트가 state가 바꼈는지 안 바꼈는지 알려면?
:불변성을 지켜주는게 너무 중요하다!!

아래 예시를 살펴보자.

  function App() {
    const [obj, setObj] = useState({
      name: "홍길동",
      age: 30,
    });

    return (
      <div>
        <div>{obj.name}</div>
        <button
          onClick={() => {
            obj.name = "홍길순"; // button을 누르면, obj의 name이 홍길동 -> 홍길순으로 변경해주자!
            setObj(obj);
            console.log(obj);
          }}
        >
          변경!
        </button>
      </div>
    );
  }

버튼을 누르면, 홍길동 -> 홍길순으로 바껴야 하는데...?

console.log를 확인 했을 때는 "홍길순"으로 바꼈는데, 왜 화면은 안 바뀌지?

왜냐면, obj는 불변하지 않으므로, obj.name을 변경하여도 여전히 동일한 주소값을 가지고 그 안에 있는 value의 값만 변한 것이다!
= 즉, 주소값이 변하지 않았기 때문에 react는 아직 같은 state라고 판단함.

=> 해결하기 위해서는 새로운 객체를 만들어줘야 한다!! = 다른 주소값을 받도록 하자.

<button
    onClick={() => {

    // 새로운 객체를 만들어야 한다.
    obj.name = "홍길순";
    const obj2 = { ...obj }; // spread operator를 이용하여 obj를 복사한다.
    setObj(obj2);
    console.log(obj2);
    }}
>
변경!
</button>

이렇게 해주면, 새로운 객체가 생성되면서 새로운 주소값이 생기고, 새 주소값이 할당되면서 react는 state가 변경되었다고 판단하여 렌더링을 한다. = 즉, 화면을 바꾼다!