[React] 불변성

불변성이란?

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

• 원시 데이터는 불변성 존재
• 객체, 배열, 함수는 불변성 없음

변경 가능한 상황 = 불변성이 없는 경우

종이에 파란색을 칠하고 그 위에 검정색을 칠하면 원래 색이었던 파란색을 가릴 수 있다.
그럼 종이는 '파란색 종이'가 아니라 '검정색 종이' 가 되는 것

변경 가능한 방법

let numbers = [1, 2, 3];
numbers.push(4); 
console.log(numbers); // [1, 2, 3, 4]

push는 불변성을 깨뜨린다.
불변성을 깨뜨린다 = 원래의 데이터 구조를 직접 변경한다.

변경 불가한 상황 = 불변성이 있는 경우

파란색이 칠해진 종이는 색을 다시 칠할 수 없다. 검정색을 칠하고 싶다면 새로운 종이를 가져와서 거기에 검정색을 칠하는 것.

불변성을 유지하는 방법

let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4]; // 새 배열을 생성하여 기존 배열을 변경하지 않음
console.log(numbers); // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]

새 배열을 생성하여 배열을 두개 만드는 방법이 존재

---

리액트 불변성 지키기 예시

배열을 setState 할 때 불변성을 지켜주기 위해서 직접 수정을 가하지 않고
spread operator [...]를 사용해서 기존의 값을 복사하고 그 이후에 값을 수정하는 식으로 구현

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;