구조분해와 스프레드

// 별칭(alias) — 다른 이름으로 받기
const { name: userName, age: userAge } = user;
console.log(userName); // "Kim"

// 기본값 — 없는 속성에 기본값 설정
const { name, role = "user" } = user;
console.log(role); // "user" (없으므로 기본값)

// 중첩 구조분해
const response = {
  data: {
    user: { name: "Kim", settings: { theme: "dark" } }
  }
};
const { data: { user: { settings: { theme } } } } = response;
console.log(theme); // "dark"

// React에서 가장 많이 보는 구조분해 — props
function UserCard({ name, age, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}세</p>
      <p>{email}</p>
    </div>
  );
}

// props.name, props.age 대신
// { name, age }로 바로 꺼내 씁니다

// 배열 구조분해 기본
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
// first = "red", second = "green", third = "blue"

// 건너뛰기
const [, , last] = colors;
// last = "blue"

// useState는 이것과 같다!
// useState(0)은 [0, setter함수]를 반환
const [count, setCount] = useState(0);
// count = 0, setCount = 상태변경함수

// 나머지 패턴 (rest)
const [head, ...tail] = [1, 2, 3, 4, 5];
// head = 1, tail = [2, 3, 4, 5]

// 함수 반환값 구조분해
function getMinMax(arr) {
  return [Math.min(...arr), Math.max(...arr)];
}
const [min, max] = getMinMax([3, 1, 4, 1, 5]);
// min = 1, max = 5

// 배열 스프레드
const a = [1, 2, 3];
const b = [4, 5, 6];

// 복사
const copy = [...a];
// [1, 2, 3] (원본과 별개)

// 합치기
const merged = [...a, ...b];
// [1, 2, 3, 4, 5, 6]

// 요소 추가
const withNew = [...a, 99];
// [1, 2, 3, 99]

// 객체 스프레드
const user = { name: "Kim", age: 25 };

// 복사
const copy = { ...user };

// 덮어쓰기 (뒤에 오는 값이 우선)
const updated = { ...user, age: 26 };
// { name: "Kim", age: 26 }

// 속성 추가
const withRole = { ...user, role: "admin" };
// { name: "Kim", age: 25, role: "admin" }

// React 불변 업데이트 패턴 — 가장 중요!
const [todos, setTodos] = useState([
  { id: 1, text: "공부", done: false },
]);

// 추가
setTodos([...todos, { id: 2, text: "운동", done: false }]);

// 수정 (id가 1인 항목의 done을 true로)
setTodos(todos.map((t) =>
  t.id === 1 ? { ...t, done: true } : t
));

// 삭제
setTodos(todos.filter((t) => t.id !== 1));