[React] Javascript 구조 분해 할당

 

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다

 

  const a = {
    name: "son",
    age: 33,
  };

  const aName = a.name;
  const aAge = a.age;

  console.log("aName", aName); // son
  console.log("aAge", aAge); // 33

 

위와 같이 객체의 속성값을 하나하나 대입하는 대신에

  const { name: bName, age: bAge } = a;

  console.log("bName", bName); // son
  console.log("bAge", bAge); // 33

 

구조 분해 할당 구문으로 손쉽게 값을 대입할 수 있습니다

const { name, age } = a;
  console.log("name", name); // son
  console.log("age", age); // 33

 

객체의 프로퍼티명과 대입할 변수명이 같으면 변수명을 생략할 수 있습니다

• 객체 a의 name, age 프로퍼티와 같은 변수명인 name에 "son", age에 33이 대입되었습니다

구조 분해 할당의 기본값 주기

할당하고자 하는 변수가 분해하고자 객체의 프로퍼티에 없다면 undefined가 할당됩니다.

  const car = {
    model: "genesis",
    company: "hyundai",
    price: 500,
  };
  const { model, company, color } = car;
  console.log("color", color); // undefined

 

undefined가 할당되지 않게 기본값을 줄 수 있습니다

 

  const { model, company, color ="red" } = car;
  console.log("color", color); // red

 

 

구조 분해 할당의 나머지 모두

구조 분해 할당으로 대입된 값을 제외하고 남은 값들을 ...로 가져올 수 있습니다

 const a = {
    name: "John",
    email: "john@example.com",
    password: "password",
    address: "gangnam",
  };

  const { name, email, ...b } = a;
  console.log("name", name);
  console.log("email", email);
  console.log("b.password", b.password); // "password"
  console.log("b.address", b.address); // "gangnam"

 

• name, email 을 제외한 password와 address가 객체 b에 대입되었습니다

 

나머지 모두를 사용해서 객체 복사

나머지 모두를 사용해서 객체를 복사할 수 있습니다.

 

객체 b에 객체 a의 값을 복사하고 싶을 때

  const b = a; // a와 b는 같은 객체 참조

 

다음과 같이 대입하면 b에는 a의 참조값이 대입되게 되어 객체 b를 수정하면 객체 a도 함께 수정됩니다

이를 막기 위해 나머지 모두를 사용해서 객체 a의 값을 복사한 값을 b에 대입할 수 있습니다

  const a = {
    name: "son",
    age: 33,
    city: "london",
  };

  const { ...b } = a;
  b.age = 66;
  console.log("b.age", b.age); // 66
  console.log("a.age", a.age); // 44

 

• 객체 b의 age 프로퍼티 값을 66으로 변경하여도 객체 a의 age 프로퍼티 값은 변경되지 않습니다

 

얕은 복사, 깊은 복사

한 단계까지만 복사하는 것을 얕은 복사라고 합니다.

얕은 복사의 경우 다음과 같이 객체가 중첩되어 있을 경우, 중첩된 객체는 참조값을 복사하게 됩니다.

중첩된 객체의 참조값이 아닌 실제 값을 복사하기 위해 깊은 복사를 사용할 수 있습니다.

  const a = {
    name: "John",
    age: 44,
    address: {
      street: "Lorem Ipsum",
      city: "seoul",
    },
  };

  // 얕은 복사 (shallow copy)
  const { ...b } = a;
  b.age = 55;
  console.log("b.age", b.age); // 55
  console.log("a.age", a.age); // 44

  b.address.city = "busan";
  console.log("a.address.city", a.address.city); // busan
  console.log("b.address.city", b.address.city); // busan

• 1차적인 얕은 복사로 b.address.city의 값을 busan으로 변경하자 a객체의 a.address.city의 값도 busan으로 바뀌었습니다

얕은 복사를 중첩하여 깊은 복사하기

const { ...c } = a; // 얕은 복사
  const { ...address1 } = a.address; // 얕은 복사
  c.address = address1; // 깊은 복사
  c.address.city = "london";
  console.log("a.address.city", a.address.city); // busan
  console.log("c.address.city", c.address.city); // london

 

얕은 복사를 여러번 한 후 복사한 값을 대입해서 깊은 복사를 수행했습니다

• 깊은 복사를 하여 c.address.city의 값을 변경해도 a.address.city의 값이 변경되지 않습니다

 

배열의 구조 분해 할당

배열도 객체와 마찬가지로 구조 분해 할당 구문과 나머지 모두를 사용할 수 있습니다

배열의 경우 입력한 변수명에 index 순서대로 할당됩니다

  const a = [6, 7, 8];

  const [x, y, z, b, c = 9] = a;
  console.log("x", x); // 6
  console.log("y", y); // 7
  console.log("z", z); // 8
  console.log("b", b); // undefined
  console.log("c", c); // 9