javascript에서 사용할 수 있는 모든 형태의 값을 참(true) 또는 거짓(false)으로 분류해 원하는 조건을 만족하는 새로운 배열을 반환할 수 있다.
헷갈렸던 코드는 삭제버튼 기능구현 중
const handleDeleteBtn = () => {
// 삭제버튼을 눌렀을때 기존의 todolist가 없어지고 새로운 todolist로 바뀌어야한다
setTodos((prev) => prev.filter((t) => t.id !== item.id));
//id값이 다르면 filter를 해줘라
};
여기서 prev는 기존의 배열이고 이 배열을 filter해서 삭제버튼을 누른 요소의 id와 기존배열의 id를 하나씩 비교해서 id가 다른 것만 반환하는 것이다.
처음에 이해가 안됐던 부분이 삭제버튼을 클릭하면 어떤 조건으로 filtering되고, 그 결과 새로운 배열이 생겨서 기존배열의 id와 비교하는게 순서가 맞는것 아닌가?? 싶었는데 저기서 t는 내가 클릭한 요소이고 item은 전체 요소가 들어간 배열로 내가 클릭한 t의 id를 이용해서 전체배열과 비교 후 클릭한 t만 뺀 새로운 배열을 반환하는 것이다.
위의 코드를 console.log로 확인하기 위해 바꾸면
const handleDeleteBtn = () =>
//삭제버튼을 눌렀을때 기존의 todolist가 없어지고 새로운 todolist로 바뀌어야한다
setTodos((prev) => {
console.log("prev", prev);
const newTodos = prev.filter((t) => {
console.log("t", t);
console.log("item", item);
return t.id !== item.id; //
});
console.log("newTodos", newTodos);
return newTodos;
}); //id값이 다르면 filter를 해줘라
화살표함수에서 중괄호 return을 넣은 코드와 생략한 코드의 차이?
const arrowFunction = () => 1; const arrowFunction2 = () => {return 1;};
둘 다 같은 코드이다.
후발대 배열강의가 진짜 좋더라구요! ㅎㅎ