[#4][#5] 투투 리스트 페이지 요구사항 구현

[youngminss]

해결한 이슈

• [Assignment 1-4] 투두 리스트 스타일링 & 투두 아이템 생성 #4
• [Assignment 1-5] 투두 아이템 수정, 삭제 #5

해결 방법

Assignment 1-4 - 투두 리스트 스타일링 & 투두 아이템 생성

• UI는 사전에 재사용 가능하도록 생성한 Input, Button 컴포넌트를 사용하고, 이들을 커스텀한 폼 안에 넣어 구현.
• 새로운 Todo 입력과 추가 버튼에 대한 이벤트 핸들러, 현재 입력 중인 추가할 Todo 내용에 대한 로직을 useTodoInputForm 커스텀 훅으로 분리.
• 현재 입력 중인 Todo 내용 유무에 따라 추가 버튼 비활성화(disabled) 제어
• Todo 추가 버튼을 누르면 담당 이벤트 핸들러 내부에 있는 onCreateNewTodoSubmit 메서드가 호출되어 새로운 Todo 가 추가된 리스트를 새로 onGetTodo 한다.
• 새로운 Todos 아이템에 대해 리렌더링 이 이뤄지므로써 새로운 Todo 가 추가된 투두 리스트를 확인.

Assignment 1-5 - 투두 아이템 수정, 삭제

• 각 Todo Item 에 대해 수정 모드 가 있다고 요구사항에 있음.
• 이를 수정 off 모드일 때 Todo Item 과, 수정 on 모드일 때 Todo Item 컴포넌트로 분리해서 사용할까 고민.
• 결론적으로으로 분리하지 않고, isEditMode 상태에 따라 완료 여부, 기존 Todo 내용 수정 입력 컴포넌트, 수정 모드일 때 버튼 컴포넌트 를 조건부 렌더링(Conditional Rendering) 처리해서 구현.
• 수정, 삭제에 대한 처리는 useTodoItem 커스텀 훅에서 처리.
  • 실제 API 호출에 대한 것은 부모 컴포넌트에서 props 로 넘겨준 수정, 삭제에 대한 메서드들을 호출해서 처리.
• 수정 or 삭제에 대한 처리가 끝난 후에도 역시 반영된 새로운 투두 리스트를 보여주기 위해 onGetTodo 를 호출해서 todos 상태를 업데이트해서 리렌더링 필요.

추가적인 태스크

• 생각해보니 새로운 Todo 입력 컴포넌트에 대해서는 제어 컴포넌트(Controlled Component) 방식을 취하고 있지 않아도 된다. 따라서 비제어 컴포넌트(Uncontrolled Component) 방식으로 변경하거나 디바운스(Debounce) 를 이용해 불필요한 리렌더링을 방지하는 것이 성능 차원에서 좋겠다.

PR Submit 이전에 확인하세요 !

체크리스트

• Merge 하는 브랜치에 Master/Main 브랜치가 아닙니다.