[React] 불변성(immutability)

리액트에서 불변성(immutability)이란 객체나 배열 같은 데이터를 직접 수정하지 않고, 항상 새로운 값을 생성해서 상태를 업데이트하는 방식을 의미한다.
이를 간단히 말하면, 기존 데이터를 건드리지 않고 복사본을 만들어 변경한다는 것이다.

🤔 불변성, 왜 중요할까?

1. 효율적인 렌더링
   리액트는 상태가 바뀌었을 때 변경된 부분만 다시 렌더링한다.
   이를 위해 React는 이전 상태와 새로운 상태를 비교(shallow comparison)한다.
   불변성을 지키면 두 객체를 빠르게 비교할 수 있어 성능이 좋아진다.

   prevState === nextState // true or false로 비교

2. 예측 가능한 코드
   데이터를 직접 수정하면 예상치 못한 동작이 발생할 수 있다.
   하지만 새로운 값을 생성하는 방식은 상태의 변경점을 명확하게 해 주어 디버깅과 유지보수를 더 쉽게 만들어준다.

✨ 불변성을 지키는 방법

1. 배열의 변경
   기존 배열을 직접 수정하지 말고, map, filter, concat 같은 메서드를 사용한다.

   // 예시: 배열의 값을 변경할 때
   const numbers = [1, 2, 3];
   const updatedNumbers = numbers.map(num => num * 2); // [2, 4, 6]

2. 객체의 변경

   	스프레드 연산자(...)를 사용하거나 Object.assign으로 새 객체를 만듭니다.

   // 예시: 객체의 값을 변경할 때
   const user = { name: "ttining", age: 100 };
   const updatedUser = { ...user, age: 80 }; // { name: "ttining", age: 80 }

3. 상태 관리 라이브러리
   상태가 복잡할 경우, Redux 같은 라이브러리는 불변성을 유지하는 도구를 제공한다. 또한 immer 라이브러리를 사용하면 간단한 코드로 불변성을 유지할 수 있다.

   import produce from "immer";
   
   const state = { name: "ttining", age: 100 };
   const newState = produce(state, draft => {
       draft.age = 80; // 불변성을 깨지 않고 수정 가능
   });