[ React ] 불변성과 useState

React에서 상태(state)를 다룰 때, 불변성(immutability)은 매우 중요한 개념입니다. useState 훅을 사용하는 경우, 상태를 변경할 때 새로운 상태를 생성하는 것이 좋습니다. 이 블로그에서는 React의 useState와 불변성의 개념에 대해 자세히 알아보겠습니다.

1. useState란?

React에서 상태를 관리하기 위해 제공되는 훅 중 하나입니다. 함수형 컴포넌트에서도 상태를 사용할 수 있게 해주어, 클래스 컴포넌트의 기능을 대체합니다.

import React, { useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

2. 불변성의 중요성

React에서 불변성을 지키지 않으면 성능 저하 및 예측 불가능한 버그가 발생할 수 있습니다. 이는 주로 React의 "얕은 비교(Shallow Comparison)"에 기인합니다. React는 상태의 변경 여부를 판단할 때, 참조 비교를 통해 이루어지기 때문입니다.

3. 상태 업데이트 방법

불변성을 지키면서 useState를 사용하는 방법은 다음과 같습니다.

(1) 객체나 배열을 업데이트할 때는 기존 상태를 복사

객체의 경우:

const [user, setUser] = useState({ name: 'John', age: 25 });

// 올바른 방법
setUser((prevUser) => ({ ...prevUser, age: 26 }));

배열의 경우:

const [numbers, setNumbers] = useState([1, 2, 3]);

// 올바른 방법
setNumbers((prevNumbers) => [...prevNumbers, 4]);

(2) 함수형 업데이트 사용

함수형 업데이트는 이전 상태를 받아와서 그 상태를 바탕으로 새로운 상태를 반환하는 함수입니다.

const [count, setCount] = useState(0);

// 올바른 방법
setCount((prevCount) => prevCount + 1);

4. 왜 불변성을 유지해야 할까?

(1) PureComponent 및 React.memo 사용 시

React의 성능 최적화를 위해 PureComponent나 React.memo를 사용할 때, 객체나 배열이 불변성을 유지하지 않으면 제대로 동작하지 않을 수 있습니다.

(2) 얕은 비교의 문제

React는 얕은 비교를 통해 이전 상태와 새로운 상태를 비교합니다. 따라서 참조가 같아야지만 적절한 업데이트가 이루어집니다. 만약 불변성을 지키지 않으면 예상치 못한 결과가 발생할 수 있습니다.

불변성을 유지하면 React는 더 효율적으로 업데이트를 관리할 수 있고, 상태의 변화를 예측 가능하게 만들어줍니다. useState를 사용할 때는 항상 불변성을 유지하도록 주의하면서 코드를 작성해야 합니다.