typescript-todo : 전역 상태관리 & Screen 구조, 함수 설계
💙 전역 상태관리 구조 잡기
💙 Screen 구조 잡기
1. ListScreen
(1) 할 일 작성
(2) 할 일 추가
(3) 할 일 완료 체크
(4) 완료된 할 일 일괄 삭제
(5) 할 일 삭제
2. FocusScreen
(1) 할 일 완료 체크
(2) 할 일 미완료 중 랜덤 선택
(3) 할 일 미완료 중 가장 첫번째 화면에 띄우기
💙 ListScreen 기능에 따른 코드 구조 잡기
useState : newTaskLabel, setNewTaskLabel
1. 할 일 작성/추가 : input 태그와 form 태그 사용
useState의 newTaskLabel과 setNewTaskLabel을 통한 할 일 입력값(label) 관리
input 태그
: onChange 속성 실행 함수 : handleNewTaskLabel => setNewTaskLabel
form 태그
: onSubmit 속성 실행 함수 : submitNewTaskLabel => 입력값이 존재하는 경우 : addTask
2. 할 일 완료 체크 : input (type:checkBox) 태그와 div 태그로 이뤄진 checkBox 컴포넌트
input 태그
: checked 속성값 : task.isComplete
: onChange 속성 실행 함수 : handleTaskCompleteChange => updateTaskComplete
3. 완료된 할 일 일괄 삭제 : button 태그인 TextButton 컴포넌트
button 태그
onClick 속성 실행 함수 : handleClearclick => setTask와 filter 함수 활용
4. 할 일 삭제 : button 태그인 DeleteButton 컴포넌트
button 태그
onClick 속성 실행 함수 : handleTaskDelete => setTask와 filter 함수 활용
💙 FocusScreen 기능에 따른 코드 구조 잡기
1. 할 일 완료 체크 : button 태그
onClick 속성 실행 함수 : handleMarkComplete => updateTaskCompletetion
2. 할 일 미완료 중 랜덤으로 골라 화면에 띄우기 : button 태그인 TextButton 컴포넌트
onClick 속성 실행 함수 : shuffleFocusedTask
3. 할 일 미완료 중 가장 첫번째 화면에 띄우기
focusedTask 값 띄우기