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

1. 불변성

불변성이란 메모리에 있는 값을 변경할 수 없는 것.
자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.

 

2. 변수를 저장하면 메모리에 어떻게 저장될까?

num1과 num2는 변수의 이름은 다르지만, 같은 메모리 공간을 바라보고 있다.

let num1 = 1;
let num2 = 1;

console.log(num1 === num2); // true 
//같은 메모리 공간을 참조하고 있다는 의미

 

데이터를 수정해도, 원시 데이터는 불변성을 가지고 있다. 기존 메모리에 저장 되어 있는 1이라는 값은 변하지 않고, 새로운 메모리 저장 공간에 2가 생기고 num1이 그 공간을 참조하는 것이다. 

 

하지만 원시 데이터가 아닌 값. 객체, 배열, 함수의 경우는 다르다.

​let obj_1 = {name: ‘kim’} 이라는 값을 선언하면 메모리에 obj_1이 저장되고,

이어서 let obb_2 = {name: ‘kim’} 이라고 같은 값을 선언하면 obj_2라는 메모리 공간에 새롭게 저장된다.

 

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

console.log(obj1 === obj2); // false
//값이 같더라도 둘은 서로 다른 메모리 공간을 참조하고 있다.

 

obj_1.name = ‘park’ 이라고 새로운 값을 할당해도 객체는 불변성이 없음!!

그래서 기존 메모리 저장공간에 있는 {name: ‘kim’} 이라는 값이 {name : ‘park’} 으로 바뀌어 버린다.

 

• 원시데이터는 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장한다.
• 원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꾼다.

---

3. 왜 리액트에서 불변성을 지켜주는 것이 중요할까?

리액트에서는 화면을 리레더링 할지 말지 결정할 때 state의 변화를 확인

=>. state가 변했으면 리렌더링, state가 변하지 않았으면 리렌더링x

 

그때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 `메모리 주소`를 비교하는 것이다.

 

리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 된다. 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 되고 일어나야 할 리렌더링이 일어나지 않게된다.

4. 리액트에서 불변성을 지켜주는 방법

배열을 setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고 이후에 값을 수정

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;