재사용될 여지가 있는 button 태그를 컴포넌트화 하였습니다.
props 로는 value, onClick, disabled, color 를 받습니다.
value: 버튼 내 표시될 문자열입니다.onClick: 버튼을 클릭 시 실행될 함수입니다.disabled: 버튼의 비활성화 여부에 대한boolean값입니다.color: 버튼의 색에 대한 문자열입니다.
재사용될 여지가 있는 input 태그를 컴포넌트화 하였습니다.
props 로는 value, placeholder, onChange, width 를 받습니다.
value: 인풋 내 표시될 문자열입니다.placeholder: 인풋 내 표시될placeholder의 문자열입니다.onChange: 인풋 내onChange이벤트가 발생될 시 실행될 함수입니다.width: 인풋의width를 정해주는 숫자입니다. 기본값은 160 입니다.
여러 페이지에서 재사용될 여지가 있는 header 를 컴포넌트화 하였습니다.
props 로는 아무것도 받지 않습니다.
todo를 입력하고 저장해놓은 뒤, list 내에 추가해주는 컴포넌트입니다.
props 로는 setTodoList 를 받습니다.
setTodoList:todoList를set해주는 함수입니다.
또한, 컴포넌트 내에는 handleChangeTitle, handleChangeDetail, handleAddTodo 함수가 존재합니다.
handleChangeTitle:todo내title을 변경해주는 함수입니다. 인자로는 변경할 문자열을 받습니다.handleChangeDetail:todo내detail을 변경해주는 함수입니다. 인자로는 변경할 문자열을 받습니다.handleAddTodo:props로 받아온setTodoList를 활용해todoList에 새로운todo를 추가해주는 함수입니다. 인자로는 아무것도 받지 않습니다.
TodoItem 를 보여주는 컴포넌트입니다.
props 로는 todoList, setTodoList, workingList, doneList 를 받습니다.
todoList:todo들이 담긴 배열입니다.setTodoList:todoList를set해주는 함수입니다.workingList: 진행중인todo를 보여주는 섹션인지에 대한boolean입니다.doneList: 완료된todo를 보여주는 섹션인지에 대한boolean입니다.
todoList 배열 내 요소들을 받아 UI로 보여주는 컴포넌트입니다.
props 로는 todo, todoList, setTodoList 를 받습니다.
todo:todo객체입니다.todoList:todo들이 담긴 배열입니다.setTodoList:todoList를set해주는 함수입니다.
또한, 컴포넌트 내에는 handleDeleteTodo, handleChangeTodoStatus 함수가 존재합니다.
handleDeleteTodo:todoList내 특정todo를 삭제하는 함수입니다. 인자로는todo의id를 받습니다.handleChangeTodoStatus:todoList내 특정todo의isDone상태를 바꾸어주는 함수입니다. 인자로는todo의id를 받습니다.