할 일 삭제 기능
배열의 불변성을 지키면서 배열의 원소를 제거하기 위해 filter를 사용했다.
filter
- isDone이 false인 값들의 배열을 추출하고 싶을 경우
- filter를 통해서 isDone이 false인 객체들을 담은 배열을 추출할 수 있다.
- console.log로 출력한 배열을 보면 리스트 순서대로 출력된 것을 확인할 수 있다.
- 즉, 배열의 순서를 지키면서 필터링 시켜줄 수 있다.
const todos = [
{
id: 1,
title: 'test1',
content: 'test1',
isDone: true
},
{
id: 2,
title : 'test2',
content: 'test2',
isDone: true
},
{
id: 3,
title: 'test3',
content: 'test2',
isDone: false
},
{
id: 4,
title: 'test4',
content: 'test5',
isDone: false
}
];
const filterResult = todos.filter(todo => todo.isDone === false);
//[
{ id: 3, title: 'test3', content: 'test2', isDone: false },
{ id: 4, title: 'test4', content: 'test4', isDone: false }]Todo를 삭제시킬 함수 생성
- 삭제 버튼을 누르면 삭제 기능을 할 onRemoveTodo 함수를 생성시켜준다.
id:id를 인자로 받아서 삭제를 시킬 해당id값을 가진 요소를 제외하고 배열을 필터링 시켜준다.setTodos: 필터링된 값을 받아와서setTodos()메소드로 변수를 다시 저장한다.
const onRemoveTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id))
}Props로 삭제 함수 전달
- 삭제 버튼이 실행될 컴포넌트로 해당 생성된
onRemoveTodo함수를props로 전달한다.- 나의 경우 List라는 컴포넌트로 해당 함수를 전달했다.
return (
<div>
<List todos={todos}
onRemoveTodo={onRemoveTodo}
checkTodo={checkTodo} />
</div>
);
}Props 받기
- 전달받은 props를 Todo 삭제를 실행시킬 컴포넌트로 다시 이동시킨다.
- 나의 경우 List라는 컴포넌트에서 onRemoveTodo를 받고 Todo라는 컴포넌트로 props를 전달했다.
function List({ todos, onRemoveTodo, checkTodo }) {
return (
<div>
<div className="form">
<h3 className="title-state">할 일</h3>
<div>
{todos.filter((todo) => !todo.isDone)
.map((progressTodo) => (
<Todo
todo={progressTodo}
key={progressTodo.id}
onRemoveTodo={onRemoveTodo}
checkTodo={checkTodo}
/>
))
}
</div>
</div>
</div>
);
}할 일 삭제 실행하기
- List 컴포넌트로부터 다시 전달받은 onRemoveTodo 함수를 “삭제” 버튼이 있는 onClick에서 실행
- 이때 현재 자신의 id값을 넣고 삭제 함수를 호출시켜주면 된다.
const { id, title, content, isDone } = todo;: 구조 분해할당을 통해 값 추출onClick={() => onRemoveTodo(id)}onClick={onRemoveTodo(id)}는 안되는 이유? 렌더링 되는 동시에 onRemoveTodo함수가 바로 실행된다. → 아무것도 렌더링되지 않고 에러메세지 반환할 수 있음- onClick에 콜백을 넣어주고 함수가 실행될 때(클릭을 누르면) id를 건네주기 위함
- 화살표 함수를 사용하지 않을 경우
onClick={function() {onRemoveTodo(id)}}표현할 수 있음
function Todo({ todo, onRemoveTodo, checkTodo }) {
const { id, title, content, isDone } = todo;
return (
<div className='index'>
<span className='item-list'>{title}-{content}</span>
<div>
<button className='delete-btn' onClick={() => onRemoveTodo(id)}>삭제</button>
{isDone ?
<button className='complete-btn' onClick={() => checkTodo(id)}>취소</button>
: <button className='complete-btn' onClick={() => checkTodo(id)}>완료</button>
}
</div>
</div>
)
}참고 자료
개인 공부 정리