자바스크립트 공부하기 - ... 전개 연산자. 리액트에서도 자주 쓰인다.

역시 뭐든 기초를 탄탄하게 하고 봐야 합니다..

자바스크립트에서 휘릭 넘겼던 "..." 전개 연산자.

리액트 배열 상태 상태 다룰 때 자주 쓰인다고 🥺

다시 복습 갑시다 - !

---

배열에서 ... (전개 연산자) 뜻

배열이나 객체의 내용물을 풀어서(펼쳐서) 넣는 거예요.

 

✅ 예시 1: 배열 복사

const arr = [1, 2, 3];
const copied = [...arr];
console.log(copied); // [1, 2, 3]

→ ...arr은 arr의 요소들을 하나씩 꺼내서 새 배열에 넣어요. 깊은 복사는 아니고 얕은 복사예요.

 

 

✅ 예시 2: 배열 합치기

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]

 

🔍 차이점 설명

✅ [a, b]

const a = [1, 2];
const b = [3, 4];
const combined = [a, b];
console.log(combined); // [[1, 2], [3, 4]]

👉 배열 a와 배열 b가 각각 하나의 요소로 들어가는 거야.
즉, 배열 안에 배열이 들어간 형태 → "2차원 배열"이라고 보면 돼.

 

✅ [...a, ...b]

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]

👉 a와 b 안에 들어있는 값들만 꺼내서 하나의 배열로 합친 거야.
... 덕분에 각 배열을 펼쳐서 한 줄로 만든 거지!

 

필요한 상황에 따라 선택하면 돼!

• 배열을 그룹으로 묶고 싶으면 [a, b]
• 진짜 합쳐서 한 줄짜리 배열 만들고 싶으면 [...a, ...b]

 

✅ 예시 3: React에서 상태 변경할 때

리액트에서 useState로 배열 상태를 다룰 때 자주 나와요.

const [items, setItems] = useState([1, 2]);

const addItem = () => {
  setItems([...items, 3]); // 기존 배열에 3 추가
};

→ ...items로 기존 배열을 복사한 다음, 3을 뒤에 추가하는 방식이에요. 기존 배열을 직접 수정하지 않기 위해 사용돼요.

 

🧩 먼저 ...items는 무슨 뜻?

[...items, 3]

→ items는 [1, 2]야.

→ ...items는 1, 2로 펼쳐져서

[1, 2, 3]

이런 배열을 만든 거야.

 

---

✅ 그래서 setItems([...items, 3])는 뭐 하는 건데?

이 함수는 React의 상태(state)를 바꾸는 함수야.
근데 중요한 포인트가 있어!

👉 리액트에서는 기존 배열이나 객체를 직접 수정하면 안 돼!

왜냐면:

• 리액트는 변화를 감지해야 리렌더링해.
• 근데 기존 배열을 수정하면 “변화가 없다고 착각”할 수도 있어.
  예: .push() 같은 건 배열 자체를 수정하니까 안 좋아!

❗그래서 복사본을 만들어서 set해줘야 해!

setItems([...items, 3]);

→ 기존 배열 items는 그대로 두고,
→ 새로운 배열 [1, 2, 3]을 만들어서 setItems()로 전달하는 거야.
→ 이러면 리액트는 “오! 상태가 바뀌었네?” 하고 다시 화면을 그려줘.

 

🧡 쉽게 말하면:

리액트에서는 “원본 배열은 건드리지 말고”,
“복사해서 새 배열 만들고, 그걸 상태로 설정해야” 한다는 거야.