리액트 에서의 객체 구조 분해 할당(destructuring) = 활용.

구조 분해 할당 

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

 

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
  
  var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

 

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

const example = { a: 123, b: { c: 135, d: 146 } };

const { a , b : { d } } = example;

console.log(a); // 123

console.log(d); // 146

const example = { a: 123, b: { c: 135, d: 146 } };

const { b : { d : newname } } = example;

console.log(newname); // 146

 

객체 내의 value 값 추출하기

추출하고 싶은 key 값을 짚어넣어주면, 해당 key이 가진 value 그대로 가지고 와준다.

 

let obj = { name: "홍길동", age: 20 };
// key 값을 짚어넣어주면, 해당 key 값을 그대로 가지고 와줍니다.
 let {name} = obj;
 console.log( name );
// 이렇게 객체에서 홍길동만을 추출했다.
 name = '홍길동'

 

name과 age를 꺼내고 싶다면??

 let obj = { name: "홍길동", age: 20 };
 let { name, age } = obj;
 console.log(name, age); // '홍길동' 20

**spread operator 문법을 사용할 수도 있다.

 let obj = { name: "홍길동", age: 20 };
 let { ...arr } = obj;
 // arr이 객체 안에 있는 변수를 다 가지고 들어왔다.

 console.log(arr); // { name: '홍길동', age: 20 }

let example = {
    toDoList: [
      {
        id: 1,
        text: '러닝 뛰기',
      },
      {
        id: 2,
        text: '공부하기',
      },
      {
        id: 3,
        text: '독서하기',
      },
    ],
    search: '',
  };

 

console.log(toDoList);