스파르타코딩 내일배움캠프 DAY 32 TIL - 자바스크립트 - 스프레드문법

오늘은 스프레드문법을 배워보도록 할게요.

[...prev, newTodos] 여기서 '...'이 의미하는 것은 무엇일까요?

바로 본론부터 들어가보도록 할게요.

let obj1 = {
  a: 1,
  b: 2,
};
일반 obj1이라는 객체안에 a와 b가 들어가있습니다.

---

let obj2 = {
  obj1,
  c: 3,
};
그런데 obj2안에 obj1을 넣고 싶어요. 그러면 어떻게 해야할까요? 
위 코드 처럼 바로 obj1을 넣으면 될까요?
  정답은 아닙니다. 바로 이 때, 써야 할 것이 '...' 입니다.

let obj2 = {
  ...obj1,
  c: 3,
};
이렇게 코드를 적으면 a:1,b:2,c:3이라는 값이 나옵니다.

---

let obj3 = {
  ...obj2,
  c: 2,
};
// 그러면 위와 같이 코드를 적으면 어떻게 될까요?
  //기존 obj2 에있는 c값은 3인데, 밑에다가 c:2를 적었거든요.
답은 a:1 b:2 c:2 입니다. 바로 수정이 가능하다는 뜻이죠.

스프레드문법은 배열에도 적용이 됩니다.
const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);

그럼 이제 아래의 코드를 살펴보도록 할게요.

const onHandleSwitch = () => {
    setTodos((prev) => {
      console.log(prev);
      return prev.map((t) => {
        console.log(t);
        if (t.id === item.id) {
          return { ...t, isDone: !t.isDone };  
          // 여기서 ...t는 기존의 todo들의 값을뜻합니다. 그리고
          // 기존 t의 속성인 isDone의 값을 반대로 바꿔달라는 코드 입니다.
          // 여기서 궁굼한점은, 왜 t.isdone : !t.isDone이 아니라 isdone: !t.isDone이냐는 거죠
          // 간단합니다. 가운데 있는 isDone은, 기존 todos의 기본적인 key 값이기 때문에 앞에 t를 붙이면 안됩니다.
          // 기존 t의 값을 살펴보자면 {title : '제목1', contents:'내용1', isDone : false} 로 되어있기 때문입니다. 
          
        } else {
          return t; 
        }
      });
    });
  };