structuredClone()

① MDN 스타일 요약 structuredClone() 전역 메서드는 주어진 값의 **깊은 복사(Deep Copy)**를 생성합니다.

기존에는 깊은 복사를 위해 JSON.parse(JSON.stringify(obj))를 사용했으나, 이 방식은 Date 객체를 문자열로 바꾸거나 undefined를 누락시키는 등의 치명적인 단점이 있었습니다. structuredClone()은 자바스크립트의 표준 알고리즘을 사용하여 Date, Set, Map, ArrayBuffer 등을 포함한 복잡한 데이터 구조를 원본의 훼손 없이 완벽하게 복제합니다.

---

② React 실무 예시 React에서 다중 레벨로 구성된 객체(예: 복잡한 폼 데이터, 설정 값)를 업데이트할 때, 원본 상태를 직접 수정하지 않고 안전하게 복사본을 만들어 변경할 수 있습니다.

import React, { useState } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState({
    name: "김민수",
    details: {
      hobbies: ["독서", "등산"],
      address: { city: "서울", district: "강남구" }
    }
  });

  const updateCity = () => {
    // 기존 방식: 전개 연산자(...)를 중첩해서 써야 함 (매우 번거로움)
    // const newUser = { ...user, details: { ...user.details, address: { ...user.details.address, city: "부산" } } };

    // 최신 방식: structuredClone으로 전체를 복사한 뒤 수정
    const newUser = structuredClone(user);
    newUser.details.address.city = "부산"; // 이제 깊은 복사본이므로 안전하게 수정 가능
    
    setUser(newUser);
  };

  return (
    <div className="p-4 bg-white border rounded-lg shadow">
      <h2 className="text-xl font-bold">{user.name}님의 프로필</h2>
      <p>도시: {user.details.address.city}</p>
      <p>취미: {user.details.hobbies.join(", ")}</p>
      
      <button 
        onClick={updateCity}
        className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
      >
        도시를 부산으로 변경
      </button>
    </div>
  );
};

export default UserProfile;

실무 활용 포인트:

• 참조 무결성: 중첩된 배열이나 객체를 수정할 때 의도치 않게 원본 데이터가 바뀌는 사이드 이펙트를 원천 차단합니다.
• 성능과 호환성: 외부 라이브러리(Lodash의 cloneDeep 등)를 설치하지 않아도 브라우저 내장 기능을 사용하여 번들 크기를 줄일 수 있습니다.
• 주의사항: 함수(Function)나 DOM 요소는 복사할 수 없으니, 데이터 위주의 객체를 복사할 때 사용하세요.