스프레드문법, 전개 연산자 (spread operator) - 2

spread
spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 이다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠수있다. 다음의 배열을 가진 코드가 있다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  name: '슬라임',
  attribute: 'cute'
};

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

위 코드에서는 {name:"슬라임"} 객체를 시작으로 똑같은 내용 위에 하나씩 속성이 추가시키고있는 모습이다. 스프레드의 핵심은 이 똑같은 내용에 있다 '...변수' 형식의 문법을 통해 원본 데이터를 변경하지않고 복사해 올수있다 스프레드문법을 적용시킨 내용은 아래와같다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

스프레드는 배열에서도 가능하다.

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);

배열에서 스프레드는 여러번도 사용 가능하다.

const numbers = [1, 2, 3, 4, 5];

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

리액트에서는 스프레드를 활용하여 useState를 업데이트하는데 사용가능하다. 원본 객체를 스프레드로 복사한후 이어 업데이트하고자하는 key값을 적어주면 객체가 업데이트된다

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};
let test = {...purpleCuteSlime, name:'이름'} // {name: "이름", attribute: "cute", color: "purple"}

출처 : https://learnjs.vlpt.us/useful/07-spread-and-rest.html