객체의 불변성

객체의 불변성

React에서 useState로 객체를 다룰 때 불변성(Immutability) 개념을 잘 이해하고 있어야, 예상대로 리렌더링이 잘 되고 버그도 예방할 수 있다.

불변성이란, 원래 객체를 직접 수정하지 않고, 복사해서 수정된 새 객체를 만드는 방식을 말한다.

React에서는 상태가 변경될 때 컴포넌트가 리렌더링되는데, 기존 객체를 직접 수정하면 변경을 감지하지 못해 리렌더링이 일어나지 않을 수 있다.

 

나쁜 예시 (불변성 깨짐)

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

// ❌ 직접 객체 수정
user.age = 26;
setUser(user);

• 이 경우 user 객체의 참조는 바뀌지 않았기 때문에, React는 "아무것도 안 바뀌었네" 하고 리렌더링하지 않을 수 있다.

좋은 예시 (불변성 지킴)

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

// ✅ 새 객체를 만들어서 업데이트
setUser({ ...user, age: 26 });

 

• 여기서 ...user는 기존의 모든 값을 복사하고,
• age: 26으로 덮어씌우면서 새로운 객체가 만들어진다.
• React는 이걸 감지하고 리렌더링한다.

참고: 중첩된 객체일 때

const [form, setForm] = useState({
  name: '',
  address: {
    city: '',
    zip: '',
  },
});

// ✅ 깊은 구조에서도 객체 복사
setForm({
  ...form,
  address: {
    ...form.address,
    city: 'Seoul',
  },
});

 

정리

방식	설명	리렌더링?
obj.prop = newVal	❌ 원본 수정	❌ 안 일어날 수 있음
setState({...obj, prop: newVal})	✅ 새로운 객체 생성	✅ 리렌더링됨