투두리스트를 신나게 만들고 있다.

추가와 삭제까지 겨우겨우 올라왔지만,

이제는 상태 변경을 통해 Working/Done을 설정해줘야 한다.

우선 기존의 Done/Todo 버튼에 아래 함수를 추가해보자

내가 해당 버튼(Done/Todo)을 누르면 위의 함수가 실행되게하는 코드인데,

<button onClick={() => {handleToggleDoneTodo(todo.id);}}>
Done/Todo
</button>

버튼(Done/Todo)을 클릭하면 todo.id가(newTodos의 id) 인자로 들어가서 아래처럼 작동을 한다.

  // id가 Todo.id 내가 누른버튼의todo
  const handleToggleDoneTodo = (id) => {
    // todos = 기존 3개 할일과, 내가 추가한 할일들
    const newTodos = [...todos];
    newTodos.forEach((todo) => {
      // todo.id 모든투두들의 id
      if (todo.id === id) {
        //newTodos의 todo
        todo.isDone = !todo.isDone;
      }
    });
    setTodos(newTodos);
  };

사실 여기 투두리스트를 공부하다보니, 생각보다 map,filter 함수가 굉장히 중요하다는걸 느꼈다. 이전에도 배웠지만, 다시 remind 할 겸 정리를 해보았다.

간단히 자바스크립트에서 개념 공부 할 때는, 그냥 그렇구나 하고 넘어갔는데
이게 생각보다 많이 쓰이고, 중요한 부분에서 사용을 하다보니 대충알면 안되겠다는 생각이 들어서
다시 한 번 map,filter,forEach,reduce 에 대해서 공부를 해보기로 했다.

forEach

반복문이라고 보면 된다.

const animals = [
  { name: "lion", size: "big", isAggressive: true, weight: 200 },
  { name: "pig", size: "small", isAggressive: true, weight: 200 },
  { name: "tiger", size: "big", isAggressive: false, weight: 300 },
  { name: "rabbit", size: "big", isAggressive: false, weight: 400 },
];
animals.forEach((frank) => {
  console.log(frank);
});
위의 각각의 객체값들을 frank라는 한 방에 넣은 다음, console.log로 다시 불러봤다.

const animals = [
  { name: "lion", size: "big", isAggressive: true, weight: 200 },
  { name: "pig", size: "small", isAggressive: true, weight: 200 },
  { name: "tiger", size: "big", isAggressive: false, weight: 300 },
  { name: "rabbit", size: "big", isAggressive: false, weight: 400 },
];
animals.forEach((frank, index) => {
  console.log(index);
});
만약 2번째 인자를 console 해보면, 
-> 0,1,2,3 이라는 인덱스 값이 나오는 것을 볼 수 있다.

Map

Map은 어떤 배열을 다른 형태의 배열로 다시 재생산 할 때 사용하는 반복문 입니다.
-> const 라는 변수를 선언해서, 그 변수안에 새롭게 제작된 변수를 담아보자

const animals = [
  { name: "lion", size: "big", isAggressive: true, weight: 200 },
  { name: "pig", size: "small", isAggressive: true, weight: 200 },
  { name: "tiger", size: "big", isAggressive: false, weight: 300 },
  { name: "rabbit", size: "big", isAggressive: false, weight: 400 },
];
const animalsNames = animals.map((frank) => {
  return frank.name;
});
console.log(animalsNames);

-> [ 'lion', 'pig', 'tiger', 'rabbit' ]
이렇게 변수 animalsNames를 만들고,  animals -> frank 라는 방에 담았다. 그리고
그 frank라는 방 안에 들어간 animals(객체)의 name만 따가지고 만든걸 다시 animalsNames에 담는다고 보면 된다.

Filter

해당 배열 안에서 특정 조건을 가진 아이템만 뽑아내는 반복문이다.

const animals = [
  { name: "lion", size: "big", isAggressive: true, weight: 200 },
  { name: "pig", size: "small", isAggressive: true, weight: 200 },
  { name: "tiger", size: "big", isAggressive: false, weight: 300 },
  { name: "rabbit", size: "big", isAggressive: false, weight: 400 },
];
const result = animals.filter((frank) => {
  return frank.isAggressive === false;
});
console.log(result);

->  { name: 'tiger', size: 'big', isAggressive: false, weight: 300 },
  { name: 'rabbit', size: 'big', isAggressive: false, weight: 400 }

이렇게 내가 조건을 걸 었으면, 그 조건과 관련된 객체가 나온다고 보면 된다.

Reduce

배열 안의 값들의 합을 구할 때 사용한다.

const numbers = [1, 10, 20];

const result = numbers.reduce((acc, cur) => {
  return acc + cur;
});

console.log(result);
-> 31

const animals = [
  { name: "lion", size: "big", isAggressive: true, weight: 200 },
  { name: "pig", size: "small", isAggressive: true, weight: 200 },
  { name: "tiger", size: "big", isAggressive: false, weight: 300 },
  { name: "rabbit", size: "big", isAggressive: false, weight: 400 },
];

const result = animals.reduce((acc, cur) => {
  return acc + cur.weight;
}, 0); //0 + 200 , 0+200 , 0 +300 이런식으로 0을 붙여주면 초기값을 기준으로 붙여준다.

console.log(result);
-> 1100