불변성

불변성이란?

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

변수를 선언하면 메모리에 어떻게 저장되나?

let number = 1이라고 선언한다고 하면 메모리에는 1이라는 값이 저장된다. 그리고 number라는 변수는 메모리에 있는 1을 참조하게된다. 그리고 이어서 let secondNumber = 1이라고 다른 변수를 선언한다고 가정하자. 이때도 자바스크립트는 이미 메모리에 생성되어 있는 1이라는 값을 참조한다. 즉, number와 secondNumber는 변수의 이름은 다르지만, 같은 메모리의 값을 참조하고있다. 그래서 console.log(number === secondNumber)를 출력해 보면 true가 출력된다.

하지만 원시데이터가 아닌 값(객체, 배열, 함수)는 다르다.
let obj_1 = {name: 'gwon'}이라는 객체를 선언하면 메모리에 obj_1이 저장된다. 그리고 let obj_2 = {name: 'gwon'}이라고 같은 값을 선언하면 obj_2라는 메모리 공간에서 새롭게 저장된다. 그래서 console.log(obj_1 === obj_2)를 출력하면 false가 된다.

데이터를 수정하면?

원시데이터는 기존에 1이던 number를 number=2로 새로운 값을 할당하면 기존에 메모리에 저장 되어있는 1이라는 값은 변하지 않고 새로운 메모리 저장공간에 2가 생기고 number는 새로운 메모리 공간에 저장된 2를 참조하게된다. 그래서 secondNumber를 콘솔에 찍으면 여전히 1이 출력되고, number와 secondNumber는 각각 다른 메모리 공간을 참조한다. 그래서 원시 데이터는 불변성이 있다라고 한다.

obj_1을 수정해보자. obj_1.name = 'Kim'이라고 새로운 값을 할당하면 기존 메모리 저장공간에 있는 {name: 'Gwon'}이라는 값이 {name: 'Kim'}으로 바뀐다. 원시 데이터가 아닌 데이터 타입은 불변성이 없다라고 한다.

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

React에서 불변성이 중요한 이유

react에서는 화면을 리렌더링 할지 말지를 결정할 때 state의 변화를 확인한다. state가 변했으면 리렌더링을 하고, state가 변하지 않으면 리렌더링을 하지 않는다.
state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교한다. 만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지키지 않고 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없다. 그래서 개발자가 값은 바꿧지만 리액트는 state가 변했다고 인지하지 못한다.

React에서 불변성 지키는 예시

배열을 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;