React가 얕은 비교로 상태를 감지하는 이유와 불변성의 중요성

// React에서 자주 보는 익숙한 코드 패턴
const [items, setItems] = useState(["item1", "item2"]);
const [user, setUser] = useState({ name: "jack", age: 30 });

// 배열에 아이템 추가할 때
setItems([...items, "item3"]);

// 객체 속성 업데이트할 때
setUser({ ...user, age: 29 });

[원본 배열] → push() → [같은 참조값] → React: "변화 없음" → 리렌더링 X
[원본 배열] → [...] → [새 참조값] → React: "변화 감지!" → 리렌더링 O

const obj1 = { name: "parent" };
const obj2 = { name: "child", parent: obj1 };
obj1.child = obj2; // 순환 참조 발생

// 깊은 비교 시도 시 무한 루프에 빠짐
// 얕은 비교는 이런 문제가 없음

// 잘못된 방식: 원본 배열을 직접 수정 (Mutation)
const handleAddTodoWrong = () => {
  todos.push("불변성 공부하기"); // 참조값이 변하지 않는다.
  setTodos(todos);
};

// 올바른 방식: 함수형 업데이트로 새로운 배열을 생성 (Immutability)
const handleAddTodoRight = () => {
  setTodos((prevTodos) => [...prevTodos, "불변성 공부하기"]); // 새 참조값이 생성된다.
};

const [items, setItems] = useState(["item1", "item2", "item3"]);

// 1. 스프레드 연산자 - 가장 직관적
const addItem = (newItem) => {
  setItems((prevItems) => [...prevItems, newItem]);
};

// 2. concat() - 새 배열 반환
const addItemWithConcat = (newItem) => {
  setItems((prevItems) => prevItems.concat(newItem));
};

// 3. slice() + push() 조합
const addItemWithSlice = (newItem) => {
  setItems((prevItems) => {
    const newItems = prevItems.slice(); // 전체 복사
    newItems.push(newItem);
    return newItems;
  });
};

// 4. Array.from() - 복사 후 수정
const removeItem = (index) => {
  setItems((prevItems) => {
    const newItems = Array.from(prevItems);
    newItems.splice(index, 1);
    return newItems;
  });
};

// 5. filter() - 조건에 맞는 요소만 남기기
const removeItemById = (id) => {
  setItems((prevItems) => prevItems.filter((item) => item.id !== id));
};

// 6. map() - 요소 변환
const updateItem = (index, newValue) => {
  setItems((prevItems) =>
    prevItems.map((item, i) => (i === index ? newValue : item))
  );
};

// 7. reduce() - 복잡한 변환
const groupItems = () => {
  setItems((prevItems) =>
    prevItems.reduce((acc, item) => {
      // 복잡한 로직 처리
      return [...acc, processItem(item)];
    }, [])
  );
};

const [user, setUser] = useState({
  name: "jack",
  age: 30,
  skills: ["React"],
});

// 1. 스프레드 연산자 - 단순하고 명확
const updateAge = (newAge) => {
  setUser((prevUser) => ({ ...prevUser, age: newAge }));
};

// 2. Object.assign()
const updateName = (newName) => {
  setUser((prevUser) => Object.assign({}, prevUser, { name: newName }));
};

// 3. 구조 분해 할당과 조합
const updateMultipleFields = ({ name, age }) => {
  setUser((prevUser) => ({
    ...prevUser,
    ...(name && { name }),
    ...(age && { age }),
  }));
};

// 4. JSON 방식 (깊은 복사가 필요할 때, 단 함수나 undefined는 복사 안됨)
const deepCloneUpdate = (updates) => {
  setUser((prevUser) => {
    const cloned = JSON.parse(JSON.stringify(prevUser));
    Object.assign(cloned, updates);
    return cloned;
  });
};
// 주의: 이 방식은 내부적으로 문자열 변환과 파싱을 거치므로 성능적으로 비용이 가장 크다.
// 함수나 undefined 등 JSON으로 표현할 수 없는 속성은 유실되므로, 정말 깊은 복사가 필요한 제한적인 경우에만 사용하는 것이 좋다.

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "React 공부", done: false },
    { id: 2, text: "불변성 이해하기", done: false },
  ]);

  // 문제가 있는 코드: 화면이 업데이트되지 않는다
  const toggleTodoWrong = (id) => {
    const todo = todos.find((t) => t.id === id);
    todo.done = !todo.done; // 객체를 직접 수정
    setTodos(todos); // 같은 참조값을 전달
  };

  // 해결 방법 1: map을 활용한 새 배열 생성
  const toggleTodoCorrect = (id) => {
    setTodos((prevTodos) =>
      prevTodos.map(
        (todo) =>
          todo.id === id
            ? { ...todo, done: !todo.done } // 해당 객체만 새로 생성
            : todo // 나머지 객체는 그대로 유지
      )
    );
  };

  // 해결 방법 2: 인덱스를 활용한 방법
  const toggleTodoWithIndex = (id) => {
    setTodos((prevTodos) => {
      const index = prevTodos.findIndex((t) => t.id === id);
      return [
        ...prevTodos.slice(0, index),
        { ...prevTodos[index], done: !prevTodos[index].done }, // 해당 객체만 새로 생성
        ...prevTodos.slice(index + 1),
      ];
    });
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => toggleTodoCorrect(todo.id)}>
          {todo.text} - {todo.done ? "완료" : "미완료"}
        </li>
      ))}
    </ul>
  );
}

const [user, setUser] = useState({
  name: "jack",
  profile: {
    age: 30,
    skills: ["React", "TypeScript"],
  },
});

// 잘못된 방식: 중첩된 객체를 직접 수정
const addSkillWrong = (skill) => {
  user.profile.skills.push(skill);
  setUser(user);
};

// 올바른 방식: 모든 계층에서 새 객체 생성
const addSkillCorrect = (skill) => {
  setUser((prevUser) => ({
    ...prevUser,
    profile: {
      ...prevUser.profile,
      skills: [...prevUser.profile.skills, skill],
    },
  }));
};

// Immer 라이브러리를 사용한 간편한 방법
import { produce } from "immer";

const addSkillWithImmer = (skill) => {
  setUser((prevUser) =>
    produce(prevUser, (draft) => {
      // 직접 수정하는 것처럼 보이지만 Immer가 불변성 처리
      draft.profile.skills.push(skill);
    })
  );
};