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 값 띄우기

 

💙 볼드체 & 이테릭체로 써진 기능은 useContext로 작성해 관리하자!!