리액트 관련 코드나 남의 깃허브 코드를 보면 점 세 개(...)랑 대괄호 중괄호로 변수를 뽑아내는 문법이 진짜 많이 나오는데요. 저는 아직도 이게 정확히 언제 뭘 위해 쓰는 건지 헷갈려서 그냥 복붙만 하고 있어요. 제대로 이해하고 쓰고 싶어서 질문 올립니다.
구조분해는 이런 건 알겠어요.
const user = { name: "민수", age: 20 };
const { name, age } = user;
console.log(name); // 민수
배열도 되고요.
const arr = [1, 2, 3];
const [first, second] = arr;
근데 스프레드가 헷갈려요. 어떨 때는 뭔가를 펼치는 것 같고 어떨 때는 모으는 것 같아서요. 이 두 개가 다른 건가요?
const a = [1, 2];
const b = [...a, 3, 4]; // 펼치기?
function sum(...nums) { // 모으기?
return nums.reduce((x, y) => x + y, 0);
}
둘 다 점 세 개인데 하나는 펼치고 하나는 모으는 것처럼 보이니까 더 헷갈려요. 그리고 객체 합칠 때도 쓰던데요.
const base = { a: 1, b: 2 };
const updated = { ...base, b: 99 };
console.log(updated); // { a: 1, b: 99 }
여기서 b 가 99 로 덮어써지는 게 순서 때문인지도 확실치 않아요. 제가 알고 싶은 건 이거예요. 스프레드랑 구조분해를 실제 코드에서 언제 쓰면 좋은지 상황별로 알려주시면 좋겠어요. 예를 들어 함수 인자 받을 때, 상태 업데이트할 때, 기본값 줄 때 이런 식으로요. 그냥 문법만 외우니까 막상 코드 짤 때 손이 안 나가더라고요.