Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 디스코드 봇
- 크롬 익스텐션
- background script
- 백준
- Message Passing
- 갓생
- 자료구조
- C언어로 쉽게 풀어쓴 자료구조
- Chrome Extension
- 포도주시식
- 공부시간측정어플
- TypeScript
- popup
- 크롬 확장자
- supabase
- 파이썬
- webpack
- 백준 #7568번 #파이썬 #동적계획법
- nodejs
- discord.js
- react
- 프로그래머스 #정수삼각형 #동적계획법
- 백준 7579
- content script
- 동적계획법
- 캠스터디
- 2156
- X
Archives
- Today
- Total
히치키치
typescript-todo : types.ts 작성하여 할 일과 CRUD 타입 지정 본문
💙 할 일과 할 일 들 타입 지정
1. task
( = 할 일 1개 ) 구조 잡기 : 고유값, 할 일 내용, 완료 여부의 속성으로 구성된 하나의 객체
export type Task = {
id: string;
label: string;
isComplete: boolean;
};
2. tasks
( = 할 일 여러개) 구조 잡기 : 1에서 설정한 객체인 task가 여러개로 담아져 있는 list
💙 ListScreen과 FocusScreen에 필요한 함수/변수 타입 지정
1. tasks
( = 할 일 여러개)
: task가 리스트로 있음
2. setTasks
: useState의 set 함수 & tasks 값 설정
3. addTask
: task의 label 값을 인자로 받아 새로운 task를 생성하고 이를 tasks까지 반영하는 함수
4. updateTaskCompletion
: task의 고유값 id와 완료여부 isComplete를 인자로 받아 해당 task 상태 update된 것을 tasks에 반영하는 함수
5. focusedTask
: 필수 값 아님 (task 자체 없음 OR task를 모두 다함 OR 미완료인 task에 대해 다 skip함)
: focusScreen에 띄울 미완료된 task 한 개
6. shuffleFocusedTask
: 미완료된 tasks에 대해 랜덤으로 순서 재배치하고 재배치된 리스트의 첫번째 task의 id를 focuseScreen에 띄울 할 일로 설정하는 함수
export type TaskProps = {
addTask: (task: Pick<Task, 'label'>) => void;
focusedTask?: Task;
tasks: Task[];
shuffleFocusedTask: () => void;
setTasks: React.Dispatch<React.SetStateAction<Task[]>>;
updateTaskCompletion: (taskId: string, isComplete: boolean) => void;
};
'typescript-todo' 카테고리의 다른 글
typescript-todo : ListScreen & FocusScreen 작성 (0) | 2022.08.12 |
---|---|
typescript-todo : createContext & useContext 작성 (0) | 2022.08.12 |
typescript-todo : 전역 상태관리 & Screen 구조, 함수 설계 (0) | 2022.08.12 |
typescript-todo : 요구사항/화면 구상 & 디렉토리 설정 & 기술스택 (0) | 2022.08.11 |
typescript-todo : 컴파일 설정 & 스타일링 설정 (0) | 2022.08.11 |
Comments