TIL: 불변성이 왜 필요한가

TIL: 불변성이 왜 필요한가

1. 불변성이 중요한 이유

React는 상태 변경 여부를 내부 값 비교가 아니라 참조 비교(얕은 비교) 로 판단한다.
그래서 객체 내부의 값이 실제로 바뀌어도 참조가 그대로면 React는 변경을 감지하지 못하고 리렌더를 하지 않는다.
불변성을 유지하는 건 리액트 렌더링 구조의 기본 전제.

---

2. 얕은 비교(shallow compare)와 리렌더 구조

리액트는 트리 전체를 순회해야하는 깊은 비교는 비용이 크기 때문에 얕은 비교를 사용하여 참조가 바뀌었는지만 확인한다.

• 깊은 비교 → 전체 탐색 → 느림
• 얕은 비교 → 참조 확인만 → 빠름

prevState === nextState;

이러면 “변경 없음”으로 본다.
그래서 불변성을 지키지 않으면 리렌더 안됨.

---

3. 불변성을 안 지키면?

❌ 직접 값 변경(mutation)

state.user.name = "sujin";
return state; // 참조 동일

❌ 배열 직접 변경(mutation)

arr.push("new item");
return arr; // 참조 동일

문제:

• React가 변경 감지 못함 -> UI 업데이트 안 됨
• 참조 공유로 사이드이펙트 발생

---

4. JS에서 불변성을 지키는 법법

중첩 객체를 안전하게 업데이트하려면 변경된 레벨까지 모두 얕은 복사해야 한다.

const newState = {
  ...state,
  a: {
    ...state.a,
    b: {
      ...state.a.b,
      c: 123,
    },
  },
};

배열도 동일하게 새 배열을 반환해야 한다.

const newArr = [...arr, "new item"];

문제점:

• 배열이나 객체의 구조가 복잡해지면 코드가 복잡해짐

---

요약

• React는 참조 변경 여부로 상태 변화를 판단한다
• 불변성을 깨면 리렌더가 정상적으로 일어나지 않는다
• 직접 불변성 유지하는 건 복잡하고 실수 유발
• 이 문제 때문에 Immer 같은 도구가 필요해졌다
•  같은 실수 하지말자.......