+ 
+ {/* 마우스가 올려졌을 때만 오버레이를 표시 */}
+ {isHovered && }
+
+ 매튜/김용민
+ + ) + } + + export default App + + ``` + + + + # 실습 - ToDoList 만들며 useState 익히기 🍠 + + + +https://www.youtube.com/watch?v=8pm6o5dXtw0&t=3182s + +https://www.youtube.com/watch?v=8pm6o5dXtw0&t=1032s + +수정하기 부분에서 자바스크립트의 얕은 복사, 깊은 복사에 대해 많이 헷갈리시는 분이 있을 것 이라고 생각합니다. 이에 대해 한번 정리해주시면 좋을 것 같습니다! + +- 얕은 복사 🍠 + + 얕은 복사는 객체의 1단계 깊이까지만 복사하여, 내부의 중첩 객체는 참조 값만 복사한다. 이는 원본 객체와 복사본이 동일한 내부 객체를 참조하게 되므로, 한쪽의 중첩 객체를 수정하면 다른 쪽에도 영향을 미친다. + +- 깊은 복사 🍠 + + 깊은 복사는 객체의 모든 레벨을 재귀적으로 복사하여, 원본 객체와는 완전히 독립된 복사본을 생성한다. 이는 원본 객체와 복사본이 서로 다른 메모리 주소를 가지므로, 한쪽의 객체를 수정해도 다른 쪽에는 영향을 주지 않는다. + + —> + 얕은 복사는 **객체의 참조를 공유**하고, 깊은 복사는 **새로운 객체를 생성**하여 원본과 독립적으로 동작한다는 점을 기억하면 된다. \ No newline at end of file diff --git a/mission/.DS_Store b/mission/.DS_Store new file mode 100644 index 0000000..415f509 Binary files /dev/null and b/mission/.DS_Store differ diff --git a/mission/chapter01/chapter02.jsx b/mission/chapter01/chapter02.jsx new file mode 100644 index 0000000..36f9780 --- /dev/null +++ b/mission/chapter01/chapter02.jsx @@ -0,0 +1,101 @@ +import { useState, useEffect } from 'react'; +import './App.css'; + +function App() { + const [todos, setTodos] = useState([ + { id: 1, task: '투두 만들어보기' }, + { id: 2, task: '희연 혜원 혜윤 건 찬민' }, + ]); + + const [text, setText] = useState(''); + const [editingId, setEditingId] = useState(''); // 수정 상태를 관리하는 ID + const [editText, setEditText] = useState(''); // 수정 중인 텍스트 상태 + + // 렌더링 방지 + const handleSubmit = (e) => { + e.preventDefault(); // 폼 제출의 기본 동작(새로고침)을 막음 + addTodo(); + }; + + // 1. 추가하기 + const addTodo = () => { + if (!text.trim()) return; // 빈 값은 추가하지 않도록 조건 추가 + setTodos((prevTodos) => [ + ...prevTodos, + { id: Math.floor(Math.random() * 100) + 2, task: text }, + ]); + setText(''); + }; + + // 2. 삭제하기 + const deleteTodo = (id) => { + setTodos((prev) => prev.filter((item) => item.id !== id)); + }; + + // 3. 수정 상태 변경 시 수정 텍스트 설정 + useEffect(() => { + if (editingId) { + const currentTodo = todos.find((todo) => todo.id === editingId); + setEditText(currentTodo ? currentTodo.task : ''); + } + }, [editingId, todos]); + + // 4. 수정하기 + const updateTodo = (id, text) => { + setTodos((prev) => + prev.map((item) => (item.id === id ? { ...item, task: text } : item)) + ); + setEditingId(''); + setEditText(''); // 수정이 완료되면 editText도 초기화 + }; + + return ( + <> + +{todo.id}
+{todo.task}
+{todo.id}
+ value로 변경하여 상태와 동기화 + onChange={(e) => setEditText(e.target.value)} + /> +{todo.id}
+{todo.task}
+ + )} + {editingId === todo.id && ( + <> +{todo.id}
+ setEditText(e.target.value)} + className='edit-input' + /> + + )} + + {editingId !== todo.id ? ( + + ) : ( + + )} +