7회차 과제 - 권예원

[kyw2790]

1. 개발한 기능
complete 버튼 만들기
클릭 시 완료를 나타내기 위해 줄 생김 및 글자색 회색으로 변경

2. 유의 깊게 개발한 부분
상태 불변성을 유지하는 것이 중요하다고 생각하여 handComplete 함수에서 todoList 배열을 수정할때 기존 배열을 직접적으로 변경하지 않고, 새로운 배열을 만들어서 상태를 업데이트 해주었습니다.
const handleComplete = (id) => {
const newTodo = todoList.map(item => {
if (item.id === id) {
return { ...item, completed: !item.completed };
}
return item;
});
setTodoList(newTodo);
};

3. 개발하면서 들었던 의문사항
지금은 complete 기능과 delet 기능 밖에 없어 그렇게 배열이 복잡해보이지 않지만 다른 기능들이 들어가면 배열의 복잡성이 올라갈거같습니다.
그랬을 때 어떻게 하면 배열의 복잡성을 높이지 않고 만들 수 있는 함수가 있나에 대해 의문이 들었습니다.

[gugitgugit]

프로그래밍 언어 내의 연산자의 활용이 잘 보이는 코드네요! 기본기의 중요성을 다시 한 번 깨닫고 갑니다 :)

[gugitgugit]

현재 false로 되어있는 item.completed 값을 true로 변경하는 작업이네요.
변경된 값을 다시 false로 바꾸는 것에 대한 필요성은 안 보이기 때문에

return { ...item, completed: true}

로 작성한다면 의도 파악 측면에서 더 괜찮지 않을까요?

[gugitgugit]

의문 사항에서 기능이 늘어날수록 배열의 복잡도가 늘어난다고 하신 말은 배열 내에 추가적인 필드가 계속 필요할 것이라는 말씀인 것 같네요. 물론 반드시 추가적인 필드를 생성해야 하는 기능도 있을 것입니다!

하지만 이번에 구현한 기능의 경우 각 Item을 나타내는 Component인 TodoListItem Component에서 UseState를 사용한다면 배열 내에 추가적인 필드 생성 없이 구현할 수 있습니다!

[gugitgugit]

styled-componenets 라이브러리로 css를 적용할 때 props값에 따라 다른 속성을 적용하는 좋은 코드인것 같습니다!
제가 부족한 부분인데 배워갑니다ㅎㅎ

[kyw2790]

@ches0703 코드리뷰 완료했습니다