React 입문 4 (불변성)

 

리액트에서 불변성을 유지해야 하는 이유 📖

불변성이란❓

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다.

 

아래 코드는 불변성을 유지할 수 없습니다.

let numbers = [1, 2, 3];
numbers.push(4); // 배열에 직접 요소를 추가
console.log(numbers); // [1, 2, 3, 4]

 

`numbers.push(4)`는 원래 데이터 구조를 직접 변경하기 때문에 불변성을 유지할 수 없습니다.

 

❓불변성을 깨뜨리는게 왜 문제가 될까

• 예측 불가능한 코드 : 데이터 구조를 직접 변경하면 다른 부분에서 해당 데이터를 참조하고 있을 때 예상치 못한 방식으로 동작할 수 있기 때문입니다.
• 버그 추적의 어려움 : 원본 데이터가 여러 곳에서 변경된다면 어디서 변경했는지 추적하기 어려워집니다.

 

새로운 배열을 생성해 값을 복사해야지 불변성을 유지할 수 있습니다.

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

 

 

❗불변성이 궁금하시다면

javascript 기본 3 (기본형, 참조형 데이터와 불변성)

 

 

리액트에서 불변성을 지켜야하는 이유❓

화면을 리렌더링 할 때 state의 변화를 확인해 리렌더링을 하는데 리액트에서는 state 변화 감지를 콜스택의 주소값으로 확인하기 때문입니다.

 

원시데이터가 아닌 데이터를 수정할 때 직접 수정을 하면 값은 바뀌지만 메모리주소는 변함이 없게 됩니다. 그래서 불변성을 유지해야 하는 이유입니다.

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;

 

위 코드처럼 `setDogs`를 사용할 때 전개 연산자를 이용해  새로운 배열로 업데이트를 해줘야 불변성을 유지할 수 있습니다.