# 관련링크 - [KB국민은행 바이트디그리(React) 과정 - https://www.slog.gg/p/13557#f](https://www.slog.gg/p/13557#f) # 문제풀기 - [문제풀기, go9.co/W7c](https://go9.co/W7c) - [영상 - 24 07 10, p 13622, 1강, 최종과제 설명](https://youtu.be/84hgO3EX3qY) - 코드펜 로그인 필수 - fork 필수 - 제출 하기 전에 Save 필수 - 제출할 때는 URL 만 제출 - 제출 후 수정 금지 # 문제정답 - [문제정답](https://codepen.io/jangka44/pen/XWLMGLm?editors=0012) - [영상 - 24 08 02, p 13622, 2강, 최종과제 정답](https://youtu.be/TzxsuAf3qkM) - [작업 0 - 시작](https://go9.co/W7c) - [작업 1 - 할일항목에 체크박스 추가, 그것의 체크상태를 todo.completed 으로 설정, todo.completed 의 값은 일단은 false 로 고정](https://codepen.io/jangka44/pen/JjQWxKm?editors=0012) - [작업내용](https://www.diffchecker.com/H0Z8pLsO/) - [작업 2 - useTodosState 안에서 updateCompleted 함수 생성, 체크박스 클릭시 해당 함수 호출, 이제는 체크박스를 누르면 체크상태가 토글됨](https://codepen.io/jangka44/pen/vYqxbXq?editors=0012) - [작업내용](https://www.diffchecker.com/46pNyz3B/) - [작업 3 - TodoListItem 에서 해당 todo 의 completed 상태가 true 이면 완료했다는 의미로 할일내용 표시할 때 line-thorough 적용](https://codepen.io/jangka44/pen/MWMpLmO?editors=0012) - [작업내용](https://www.diffchecker.com/Mv1LcCFI/) - [작업 4 - filter 상태변수 생성, 해당 변수의 값이 추가된 3개의 라이오 버튼에 의해서 스위칭 되도록, 아직은 filter 상태변수의 값이 바뀌어도 필터링은 되지 않음](https://codepen.io/jangka44/pen/MWMpLGV?editors=0012) - [작업내용](https://www.diffchecker.com/CXSeUpsH/) - [작업 5 - filter 상태변수의 값에 따라서 필터링된 filteredTodos 가 생성되도록, 이제 목록을 보여줄 때 todosState.todos 가 아니라 filteredTodos 가 표시, 즉 필터링이 됨](https://codepen.io/jangka44/pen/zYVZbev?editors=0012) - [작업내용](https://www.diffchecker.com/78leuViF/) - [작업 6 - 최종, 이제는 index 가 아닌 id 를 기준으로 할일을 식별해야 합니다.](https://codepen.io/jangka44/pen/XWLMGLm?editors=0012) - [작업내용](https://www.diffchecker.com/asxMifeC/) ## 정답 소스코드 ```jsx console.clear(); import React, { useState, useRef } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function TodoListItem({ todosState, todo, index }) { const [editMode, setEditMode] = useState(false); const [editedContent, setEditedContent] = useState(todo.content); const editedContentInputRef = useRef(null); const removeTodo = () => { todosState.removeTodo(todo.id); }; const showEdit = () => { setEditMode(true); setTimeout(() => editedContentInputRef.current.focus()); }; const commitEdit = () => { if (editedContent.trim().length == 0) { alert("할일을 입력해주세요."); editedContentInputRef.current.focus(); return; } todosState.modifyTodo(todo.id, editedContent.trim()); setEditMode(false); }; const cancelEdit = () => { setEditMode(false); setEditedContent(todo.content); }; return (

todosState.updateCompleted(todo.id, !todo.completed)} />

{todo.id}

{todo.regDate}

{editMode || ( <>

{todo.content}

)} {editMode && ( <> setEditedContent(e.target.value)} /> )}

); } function TodoList({ todosState, filteredTodos }) { return (

))}

); } function NewTodoForm({ todosState }) { const onSubmit = (e) => { e.preventDefault(); const form = e.target; form.content.value = form.content.value.trim(); if (form.content.value.length == 0) { alert("할일을 입력해주세요."); form.content.focus(); return; } todosState.addTodo(form.content.value); form.content.value = ""; form.content.focus(); }; return ( ); } function TodoApp({ todosState }) { const [filter, setFilter] = useState("all"); const filteredTodos = () => { switch (filter) { case "completed": return todosState.todos.filter((todo) => todo.completed); case "incomplete": return todosState.todos.filter((todo) => !todo.completed); default: return todosState.todos; } }; return (

전체 setFilter("all")} className="radio radio-primary" /> 완료 setFilter("completed")} className="radio radio-primary" /> 미완료 setFilter("incomplete")} className="radio radio-primary" />

); } function useTodosState() { const [todos, setTodos] = useState([]); const lastTodoIdRef = useRef(0); const addTodo = (newContent) => { const id = ++lastTodoIdRef.current; const newTodo = { id, content: newContent, regDate: dateToStr(new Date()), completed: false }; const newTodos = [...todos, newTodo]; setTodos(newTodos); }; const modifyTodo = (id, newContent) => { const newTodos = todos.map((todo) => id != todo.id ? todo : { ...todo, content: newContent } ); setTodos(newTodos); }; const updateCompleted = (id, completed) => { const newTodos = todos.map((todo) => id !== todo.id ? todo : { ...todo, completed } ); setTodos(newTodos); }; const removeTodo = (id) => { const newTodos = todos.filter((todo) => id != todo.id); setTodos(newTodos); }; return { todos, addTodo, modifyTodo, updateCompleted, removeTodo }; } function App() { const todosState = useTodosState(); return ( <> ); } ReactDOM.render(, document.getElementById("root")); // 유틸리티 // 날짜 객체 입력받아서 문장(yyyy-mm-dd hh:mm:ss)으로 반환한다. function dateToStr(d) { const pad = (n) => { return n < 10 ? "0" + n : n; }; return ( d.getFullYear() + "." + pad(d.getMonth() + 1) + "." + pad(d.getDate()) + " " + pad(d.getHours()) + ":" + pad(d.getMinutes()) ).substr(2); } ```

KB국민은행 바이트디그리(React) 과정 - 최종과제