React 불변성을 지켜야 하는 이유?

React에서 불변성을 지키지 않으면 컴포넌트에서 예상하지 못한 동작을 일으킬 수 있다.

또한 React 성능 최적화에도 영향을 미칠 수 있다. 

import React, { useState } from 'react';

function MutableStateExample() {
  // 잘못된 방법: 불변성을 지키지 않음
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    // 배열에 새로운 아이템을 추가하는데 push를 사용하면 안됨
    items.push(4);
    setItems(items); // 상태를 직접 업데이트하면서 불변성을 지키지 않음
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

export default MutableStateExample;

위으 코드에서 `addItem` 함수가 호출될 때, 새로운 아이템을 배열에 추가하고 `setItems`로 상태를 업데이트하고 있지만, 이 때 기존 배열을 직접 수정하고 있다.(push 메서드 사용) 이로 인해 React는 새로운 참조를 인지하지 못하고 성능 최적화를 시키지 못한다.

 

올바른 방법은 아래와 같이 새로운 배열을 생성하여 상태를 업데이트 하는 것이다.

아래와 같이 작성하면 React는 상태가 변경되었음을 감지하고 적절한 리렌더링을 수행할 수 있다.

import React, { useState } from 'react';

function ImmutableStateExample() {
  // 올바른 방법: 불변성을 지킴
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    // 새로운 배열을 생성하고 새로운 아이템을 추가
    const newItems = [...items, 4];
    setItems(newItems); // 올바른 방법으로 상태를 업데이트
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

export default ImmutableStateExample;

 

얼마 전에 면접을 봤을 때 불변성에 대해 질문을 받은 적이 있다.

잘 알고 있는 개념이라고 생각했는데 const와 엮인 질문 받았는데 잘 모르겠더라. const와 관련되어서 불변성에 대해서 이야기해보면 다음과 같다.

const car = {
  owner : "junimo",
  type : "truck"
};
car.owner = "ken";
console.log(car); // {owner: "ken", type: "truck"}

car = {
  owner : "ken222",
  type : "truck"
};
//Uncaught TypeError: Assignment to constant variable.

const 변수로 선언한 car의 owner를 다음과 같이 변경이 가능하다.

물론 car를 직접 변경하려고 하면 const에는 재할당이 불가능하다고 에러가 뜬다.

 

✨ const에 대해 주의해야 되는 점

const 변수는 재선언 및 재할당이 불가능하다.

헷갈릴 수 있는 점이 const로 선언한 변수는 값이 불변한 것이 아니라,

const 변수는 값에 대한 '참조'가 한 번 변수에 할당되고 나면 변할 수 없음을 의미하는 것이지 const 변수가 참조하고 있는 '값'이 불변한다는 것을 의미하지는 않는다.


물론 Redux 사용 시에도 불변성은 잊지말자!

[Redux] 불변성이란 무엇인가? 복사본을 만들어 저장하자.