이번 시간에는
이 삭제 버튼이 작동하는지 확인하기 위해
여기 앱 컴포넌트에 있는 handleDeleteTask에
작업을 좀 해야 하고 할 일 컴포넌트에 있는
삭제(Clear )버튼에 연결시켜야 합니다
HandleDelete 함수부터 시작하겠습니다
우선 여기에서 할 일 삭제가 이루어집니다
그러기 위해서 프로젝트를 업데이트하는 곳에서
코드를 복사하여 프로젝트를 삭제하는 곳에 붙여넣겠습니다
그 이유는 할 일을 지우는 코드도
제법 비슷하기 때문입니다
여기에 붙여넣겠습니다
하지만 지금은 프로젝트를 업데이트 하는 것이 아니므로
할 일로 바꾸겠습니다
지워야 하는 할 일의 ID가
입력값으로 들어와야 합니다
다른 곳에는 선택된 할 일의 ID가
없기 때문입니다
그러니 여기에 할 일 ID가 입력값으로 들어와야 합니다
그리고 할 일 업데이트를 하기 위하여
똑같은 filter 메소드를 사용하여 이전 할 일을 확인하겠습니다
이제 모든 할 일을 확인하며
여기서 얻는 ID와 같은지 비교합니다
selectedProjectID를 업데이트 하지는 않겠습니다
이렇게 함으로써 할 일 목록에서
지워야 하는 할 일 ID를 찾을 수 있습니다
이제 handleDeleteTask를 값으로
SelectedProjects의 OnDeleteTask로 전달하겠습니다
이미 여기서 하고 있는 작업입니다
그리고 SelectedProjects에선 이미
OnDeleteTask를 onDelete을 통해 할 일로 전달하고 있습니다
이제 마지막 단계는 할 일 컴포넌트입니다
이 onDelete 속성이
마지막엔 방금 작업하던 함수로 가리킬 수 있게 하고
이 삭제 버튼에 연결되게 합니다
그러니 여기서 onClick을 추가하지만
이 값을 여기 보이는것 처럼 onClick의 값으로 전달하면 안 됩니다
이렇게 했을 때
이 함수로 ID를 전달하지 않고
이 handleDelete함수로
필요한 ID를 전달하지 않기 때문입니다
저희는 컨트롤이 더 필요하기 때문에
이것을 함수로 감싸서
이 실행 방식에 대한 통제권을 얻게 됩니다
그러면 지금 렌더링하고 있는 이 task라는 ID를
Delete 함수로 전달할 수 있게 됩니다
그렇게 하면 할 일을 삭제할 수 있게 됩니다
이제 여기서 삭제를 누르면
이것도 지워지고, 이것도, 이것도 지워집니다
즉 제대로 작동하고 있습니다
이것으로 이 데모 앱에 마지막으로 필요했던
퍼즐을 맞췄습니다
이제 한 가지 문제만 남았습니다
새로운 프로젝트를 만들고 이 프로젝트를 선택하겠습니다
개발자 도구를 열고 여기서 글자를 치기 시작하면
여기 이상한 경고 메시지가 뜹니다
이것은 저의 NewTask에서 부터 오는 것입니다
여기서의 문제는 다음과 같습니다
여기의 enteredTask가 처음에는 undefined로 되어있습니다
왜냐하면 처음 값을 useState로 전달하지 않기 때문입니다
하지만 그 후에 이 입력 란에
타지를 치기 시작하면 값이 문자열로 변하게 됩니다
그러니 이 값 속이 처음에는 정의되지 않습니다
이 내용은 즉
이 요소가 리액트의 관리 하에 있지 않다는 내용입니다
그러더니 갑자기 문자열로 바뀌면서
반대되는 내용을 이야기하는 상황입니다
해결방법은 여기 useState에
빈 문자열을 기본값으로 설정합니다
이제 여기서 이걸 지우고 글자를 쓰면
원래 있던 화살표가 사라졌습니다
마찬가지로 새로고침을 해서 새로운 프로젝트를 만듭니다
저장하고 선택하고 글자를 쓰면 에러가 없습니다
이제 할 일 추가도 되고 삭제도 됩니다
빈 할 일 추가도 가능하지만
연습을 위하여 이게 가능하지 않도록
유효성 검사 과정을 추가하겠습니다
가장 쉬운 작업 방식을 위해서
할 일이 추가되는 것을 확인하는
HandleClick으로 가겠습니다
그리고 거기서 enteredTask의 불필요한
공백을 잘라낼(trim) 수 있습니다
빈 문자열인지 확인하고 그렇다면
여기에 return을 사용하여
이 코드가 절대 실행되지 않게 할 수 있습니다
그렇게 하면 앞으로 빈 할 일은
제출할 수 없게 됩니다
이것은 쉬운 방법이 되겠습니다
당연히 이 앱을 더 발전시켜
에러 모달(modal) 같은 것을 보이게 할 수도 있습니다
이 프로젝트에서 고치고 싶은 작은 버그 하나는
지금은 여러가지의 프로젝트가 있을 때
선택된 프로젝트에 강조 표시가 뜨지 않습니다
선택된 프로젝트 ID를
ProjectSidebar에 전달하지 않고
속성을 그 컴포넌트 안에서 사용하고 있기 때문입니다
지금으로서는 항상 정의되지 않은 상태입니다
그 이유는 지금까지
이 속성을 위한 값을 이 컴포넌트에 전달하지 않았기 때문입니다
해결을 위해 속성을 추가하겠습니다
그러고 이 속성의 값으로 projectState와
SelectedProjectID를 전달하겠습니다
그렇게 하면
강조 처리가 된 프로젝트가 보입니다
우선 이 연습 모듈에서는
지금 이 상태로도 만족스럽습니다
그리고 이제 여러분이
지금까지 배우셨던
핵심 주제들을 가지고
연습할 수 있는 기회였습니다
보시다시피 여기 앱 컴포넌트가
이제 꽤 복잡해졌습니다
많은 함수와 설정을 여러 컴포넌트를 통해서 전달했는데
이 부분에 대한 문제를
다음 강의에서 더 자세히 다루도록 하겠습니다