구조 분해 할당과 스프레드 연산자
객체, 배열의 값을 추출해서 변수에 바로 할당할 수 있는 문법
배열 값 state를 다룰때 [arr,setArr] = useState([ ])의 state가 있을때
값을 추가하고 싶을때 setArr([...arr,any])의 형식으로 추가하곤했었다.
배울때는 "배열을 풀어서 넣는다" 의 개념으로 배웠었다.
여기서 이 "..." 이 배열에서의 스프레드 연산자이다.
스프레드 연산자의 또 다른 활용법은 배열 복사가 있다.
// 단순 할당
var arr1 = [1,2];
var arr2 = arr1;
arr2.push(3);
console.log(arr2); // [ 1,2,3 ]
// 원본 배열도 변경
console.log(arr1); // [ 1,2,3 ]위처럼 배열을 복사하면
복사한 배열의 값을 변경하면 원본 배열도 변경이 된다.
하지만 스프레드 연산자로 복사하면
// 단순 할당
var arr1 = [1,2];
var arr2 = [...arr1];
arr2.push(3);
console.log(arr2); // [ 1,2,3 ]
// 원본 배열 유지
console.log(arr1); // [ 1,2 ]arr2에 arr1의 값을 참조한 새로운 배열을 만들어서 할당하기 때문에 (얕은 복사) 원본 배열이 바뀌지 않는다.
객체에서의 스프레드 연산자
var currentState = { name: '철수', species: 'human'};
currentState = { ...currentState, age: 10};
console.log(currentState)// {name: "철수", species: "human", age: 10}
currentState = { ...currentState, name: '영희', age: 11};
console.log(currentState); // {name: "영희", species: "human", age: 11}링크코드참조
currentState가 정의되고 새로운 객체 배열 안에 스프레드 연산자로 풀어지고 age값이 추가되었다.
그 후에 새로 할당을 한 후에 기존에 있던 key value값을 넣으면 새로 넣은 key value 값으로 업데이트가 된다.
써본적은 없지만 신기한 방법인것같다.
>_<