할 일, 완료 체크하기 기능
todo리스트에서 할 일인지, 완료한 일인지 체크하기 위해 filter를 사용해서 isDone인 경우의 데이터만 가져오고, map함수를 사용해서 isDone인 배열안에 담긴 객체들을 돌면서 화면에 뿌려주도록 구현했다.
map 함수 더 알아보기
const arr = [
{key:1, value:10, isDone: true},
{key:2, value:20, isDone: true},
{key:3, value: 30, isDone: false}];
const test = arr.map(function(obj){
let obj2 = {...obj}; // arr의 배열을 전개연산자로 복사해준다.
console.log("obj2",obj2);
obj2.key === 1 ? obj2.isDone = !obj2.isDone : obj2;
return obj2;
}
);
console.log(test);
// [
{ key: 1, value: 10, isDone: false },
{ key: 2, value: 20, isDone: true },
{ key: 3, value: 30, isDone: false }
]let obj2 = {...obj};- arr라는 배열 객체를 obj로 받아서 obj를 전개연산자로 복사한 것을 obj2라는 변수에 담아준다.
- map 함수는 배열 안에 있는 객체들을 돌게 된다.
obj2.key === 1 ? obj2.isDone = !obj2.isDone : obj2;- obj2의 key가 1이면 isDone이라는 키의 값을 false로 변경해준다.
- obj2의 key가 1이 아니면 obj2 배열 객체를 그대로 리턴시킨다.
console.log(test);로 확인
- key값이 1인 isDone 항목이 true → false로 바뀐 것을 확인할 수 있다.
Todo를 상태를 체크할 함수 생성
- ‘완료' 혹은 ‘취소 버튼을 누르면 삭제 기능을 할 checkTodo 함수를 생성시켜준다.
id:id를 인자로 받는다.todo.id === id: 인자로 받은 id값과 todo 배열 객체 안에 있는 id를 비교한다.? {...todo, isDone: !todo.isDone}- todo.id와 인자로 받은 id가 같으면 전개연사를 활용하여 todo 객체들을 복사한다.
- isDone 항목을 !todo.isDone으로 변경시킨 새로운 객체를 생성한다.
- 예) isDone이 true이면 false로, isDone이 false면 true로 변경해준다.
: todo- todo.id와 인자로 받은 id가 다르면 처음 받아온 그대로의 todo 배열을 그대로 리턴시킨다.
setTodos: 변경시킨 값을 반영시킨다.
// 완료하기 버튼
// 완료하기 버튼을 누르면 isDone이 true로 바껴야 함
const checkTodo = (id) => {
setTodos(todos => todos.map(todo =>
(todo.id === id? {...todo, isDone: !todo.isDone} : todo)
)
)
};Props로 완료, 취소 상태 체크 함수 전달
- ‘완료', ‘취소’ 버튼이 실행될 컴포넌트로 해당 생성된
checkTodo함수를props로 전달한다.- 나의 경우 List라는 컴포넌트로 해당 함수를 전달했다.
return (
<div>
<List todos={todos}
onRemoveTodo={onRemoveTodo}
checkTodo={checkTodo} />
</div>
);
}Props 받기 및 할 일 상태 체크하기
- 전달받은
props를 Todo 할 일을취소,완료시킬 버튼이 있는 컴포넌트로 다시 전달한다.- 나의 경우 List라는 컴포넌트에서 onRemoveTodo를 받고 Todo라는 컴포넌트로 props를 전달했다.
todos.filter((todo) => !todo.isDone)- filter 메서드를 활용해서 todo가 isDone 상태인지 아닌지 확인한다.
!todo.isDone: 할 일을 해야되는 상태면 할 일에 해당하는 데이터만 Todo 컴포넌트로 넘겨준다.
todos.filter((todo) => todo.isDone)todo.isDone: 할 일을 완료한 상태라면 완료된 일에 해당하는 데이터만 Todo 컴포넌트로 넘겨준다.
<h3 className="title-state">해야할 일 🔥</h3>
<div>
{todos.filter((todo) => !todo.isDone)
.map((progressTodo) => (
<Todo
todo={progressTodo}
key={progressTodo.id}
onRemoveTodo={onRemoveTodo}
checkTodo={checkTodo}
/>
))
}
</div>
<h3 className="title-state">완료한 일 🔥</h3>
<div>
{todos.filter((todo) => todo.isDone)
.map((doneTodo) => (
<Todo
todo={doneTodo}
key={doneTodo.id}
onRemoveTodo={onRemoveTodo}
checkTodo={checkTodo}
/>
))
}
</div>할 일 완료, 취소하기
- List 컴포넌트로부터 다시 전달받은 checkTodo 함수를
취소,확인버튼이 있는 onClick에서 실행 isDone ?: isDone(할 일이 완료인 상태)이면 취소 버튼이 나타나도록 구현:: isDone(할 일인 상태)이면 완료 버튼이 나타나도록 구현onClick={() => checkTodo(id)}- 현재
완료or취소하려는id를checkTodo함수에 넘겨준다. - 버튼을 눌렀을 때
checkTodo함수가 실행되도록 구현한다.
- 현재
<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>참고 자료
개인 공부 정리