[React] […state변수] : spread operator

스프레드 연산자는 JavaScript에서 배열이나 객체의 내용을 펼쳐서 복사하거나 결합하는데 사용되는 문법입니다. 배열에서는 ...를 사용하여 스프레드 연산자를 적용하며, 객체에서도 마찬가지로 ...를 사용하여 스프레드 연산자를 사용할 수 있습니다.

배열에서의 스프레드 연산자 예시:

const originalArray = [1, 2, 3];
const copiedArray = ***[...originalArray]***; // 원본 배열을 복사하여 새로운 배열 생성

console.log(copiedArray); // 출력: [1, 2, 3]

객체에서의 스프레드 연산자 예시:

const originalObject = { a: 1, b: 2 };
const copiedObject = **{ ...originalObject }**; // 원본 객체를 복사하여 새로운 객체 생성

console.log(copiedObject); // 출력: { a: 1, b: 2 }

스프레드 연산자는 원본 배열 또는 객체의 값을 새로운 배열이나 객체에 복사하거나 합칠 때 유용합니다. 이를 통해 원본 데이터를 수정하지 않고도 새로운 데이터를 생성하거나 조작할 수 있습니다.

[...어쩌구]

• …은 spread operator

→ array, object 자료형 왼쪽에 붙일 수 있음

1. 괄호를 벗겨주세요~ 라는 뜻

→ 만약 …[1,2,3] 을 쓰면 그 자리에 1,2,3이 남는다

1. array, object 자료형을 복사할 때 사용

→ data1에 있던 자료들을 괄호를 벗긴 다음에 다시 괄호를 씌워서 array로 만들어주세요!

→ 화살표가 달라지므로 새로운 array로 인식함

→ 화살표가 다른 완전히 독립적인 array 복사본 생성!!

let data1 = [1,2,3]; //[1,2,3]
let data2 = [...data1]; //1,2,3 하고 다시 [1,2,3]
console.log(data1===data2) //false

• array 수정시 :

[...기존state]

• object 수정시 :

{...기존state}