[ES6] Spread syntax (...)

배열 or 객체를 풀어서 다시 합치는것이 가능하다

예제1

card 객체를 받아온 뒤 spread 문법을 사용하여 key와 value쌍을 추가한 card객체를 updateCard의 콜백인자로 전달하여 상위 컴포넌트로 state까지 전달하여 렌더링하는 로직

[]를 사용하지 않으면 event.currentTarget.name : value쌍이 추가된다

(event.currentTarget.name의 (name, company, title와 같은) 값이 들어가는게 아니라 변수명으로 그대로 들어감)

 

 

아래와 같은 응용도 가능 key와 함께 value를 즉석 에서 추가가능하다

const cards = {
  '1':{id:'1', name:'eel'},
  '2':{id:'2', name:'ddde'}
}
console.log(cards)

const updated = {...cards};
updated['3']={id:'3', name:'samsamsam'}

console.log(updated)

console.log(updated['2'])

> Object { 1: Object { id: "1", name: "eel" }, 2: Object { id: "2", name: "ddde" } }
> Object { 1: Object { id: "1", name: "eel" }, 2: Object { id: "2", name: "ddde" }, 3: Object { id: "3", name: "samsamsam" } }
> Object { id: "2", name: "ddde" }

 

 

 

실제 프로젝트 사용 예 card.id가 기존에 있다면 그 값을 업데이트하고 없다면 새로운 객체를 만들어서 추가해준다.