react를 배우면서 더 많이 사용하게 된 전개구문에 대해서 알아보자!

스프레드 연산자란? 공식문서보기!
하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것이라고 설명할 수 있겠다.

예시를 보자!

let nums = [1,2,3];
console.log(...nums);//123
console.log([...nums]);//[1,2,3]

이렇게 집합을 펼쳐서 값을 복사해올 수 있다.

🤓배열에서[...]

- 병합하기(concat처럼 사용🍗🍺)

let 치 = ['치','킨','엔'];
let 맥 = ['맥','주','지'];

console.log([...치,...맥]);
//[ '치', '킨', '엔', '맥', '주', '지' ]

- 추가하기(push처럼 사용)

let 치 = ['치','킨','엔'];

console.log([...치,'콜라지']);
//[ '치', '킨', '엔', '콜라지' ]

🤓객체에서{...}

- 병합하기

let obj ={a:'1',b:'2',c:'3'};
let obj2 = {d:'4',e:'5',f:'6'};
console.log({...obj,...obj2});
//{ a: '1', b: '2', c: '3', d: '4', e: '5', f: '6' }

- 추가하기

let obj ={a:'1',b:'2',c:'3'};
let changedObj = {...obj, z:'100'}
console.log(changedObj)
//{ a: '1', b: '2', c: '3', z: '100' }

- value 변경하기

let deliciousArr = [{id:1, name:'교촌'},{id:2, name:'BHC'},{id:3, name:'BBQ'}];

let changedArr = [{...deliciousArr[0],name:'호식이두마리치킨'}];

console.log(changedArr);
//[ { id: 1, name: '호식이두마리치킨' } ]
//'교촌'에서 '호식이두마리치킨'으로 value를 변경했다. 

오늘의 결론은! [ '치', '킨', '엔', '맥', '주', '지' ] 🍗🍺