[modern-react] 리액트 스터디 파일 추가

modern-react/my-react/src/chap04/StateTodo.js

@@ -0,0 +1,305 @@
+// Code 4-2-7
+import { useState } from 'react';
+
+// Todo 항목 id의 최대값(등록할 때마다 증가)
+let maxId = 0;
+export default function StateTodo() {
+  // 입력값(title), 할 일 목록(todo)을 State로 관리
+  const [title, setTitle] = useState('');
+  const [todo, setTodo] = useState([]);
+
+  // 텍스트 상자에 입력한 내용을 State에 반영
+  const handleChangeTitle = e => {
+    setTitle(e.target.value);
+  };
+
+  const handleClick = () => {
+    // 새 할 일 추가하기
+    setTodo([
+      ...todo,
+      {
+        id: ++maxId, // id 값
+        title, // Todo 본체
+        created: new Date(), // 생성 날짜 및 시각
+        isDone: false // 실행 완료?
+      }
+    ]);
+  };
+
+  return (
+    <div>
+      <label>
+        해야 할 일:
+        <input type="text" name="title"
+          value={title} onChange={handleChangeTitle} />
+      </label>
+      <button type="button"
+        onClick={handleClick}>추가하기</button>
+      <hr />
+      {/* 할 일을 목록으로 정리하기 */}
+      <ul>
+        {todo.map(item => (
+          <li key={item.id}>{item.title}</li>
+          ))}
+      </ul>
+    </div>
+  );
+}
+
+
+
+// Code 4-2-9
+// import { useState } from 'react';
+// import './StateTodo.css';
+
+// let maxId = 0;
+// export default function StateTodo() {
+//   // 입력값(title), 할 일 목록(todo)을 State로 관리
+//   const [title, setTitle] = useState('');
+//   const [todo, setTodo] = useState([]);
+
+//   // 텍스트 상자에 입력한 내용을 State에 반영
+//   const handleChangeTitle = e => {
+//     setTitle(e.target.value);
+//   };
+
+//   const handleClick = () => {
+//     // 새 할 일 추가하기
+//     setTodo([
+//       ...todo,
+//       {
+//         id: ++maxId, // id 값
+//         title, // Todo 본체
+//         created: new Date(), // 생성 날짜 및 시각
+//         isDone: false // 실행 완료?
+//       }
+//     ]);
+//   };
+
+//   // [완료] 버튼으로 Todo 항목을 완료 상태로 변경
+//   const handleDone = e => {
+//     // todo 배열을 스캔하여 id 값이 같은 것을 검색한다.
+//     setTodo(todo.map(item => {
+//       if (item.id === Number(e.target.dataset.id)) {
+//         return {
+//           ...item,
+//           isDone: true
+//         };
+//       } else {
+//         return item;
+//       }
+//     }));
+//   };
+
+//   return (
+//     <div>
+//       <label>
+//         해야 할 일:
+//         <input type="text" name="title"
+//           value={title} onChange={handleChangeTitle} />
+//       </label>
+//       <button type="button"
+//         onClick={handleClick}>추가하기</button>
+//       {/* 할 일을 목록으로 정리하기 */}
+      
+//       <ul>
+//         {todo.map(item => (
+//           <li key={item.id}
+//             className={item.isDone ? 'done' : ''}>
+//             {item.title}
+//             <button type="button"
+//               onClick={handleDone} data-id={item.id}>완료
+//             </button>
+//           </li>
+//         ))}
+//       </ul>
+//     </div>
+//   );
+// }
+
+
+
+// Code 4-2-11
+// import { useState } from 'react';
+// import './StateTodo.css';
+
+// let maxId = 0;
+// export default function StateTodo() {
+//   // 입력값(title), 할 일 목록(todo)을 State로 관리
+//   const [title, setTitle] = useState('');
+//   const [todo, setTodo] = useState([]);
+
+//   // 텍스트 상자에 입력한 내용을 State에 반영
+//   const handleChangeTitle = e => {
+//     setTitle(e.target.value);
+//   };
+
+//   const handleClick = () => {
+//     // 새 할 일 추가하기
+//     setTodo([
+//       ...todo,
+//       {
+//         id: ++maxId, // id 값
+//         title, // Todo 본체
+//         created: new Date(), // 생성 날짜 및 시각
+//         isDone: false // 실행 완료?
+//       }
+//     ]);
+//   };
+
+//   // [완료] 버튼으로 Todo 항목을 완료 상태로 변경
+//   const handleDone = e => {
+//     // todo 배열을 스캔하여 id 값이 같은 것을 검색한다.
+//     setTodo(todo.map(item => {
+//       if (item.id === Number(e.target.dataset.id)) {
+//         return {
+//           ...item,
+//           isDone: true
+//         };
+//       } else {
+//         return item;
+//       }
+//     }));
+//   };
+
+//   // [삭제] 버튼으로 해당 Todo 항목을 삭제한다.
+//   const handleRemove = e => {
+//     setTodo(todo.filter(item =>
+//       item.id !== Number(e.target.dataset.id)
+//     ));
+//   };
+
+//   return (
+//     <div>
+//       <label>
+//         해야 할 일:
+//         <input type="text" name="title"
+//           value={title} onChange={handleChangeTitle} />
+//       </label>
+//       <button type="button"
+//         onClick={handleClick}>추가하기</button>
+//       <hr />
+//       {/* 할 일을 목록으로 정리하기 */}
+      
+//       <ul>
+//         {todo.map(item => (
+//           <li key={item.id}
+//             className={item.isDone ? 'done' : ''}>
+//             {item.title}
+//             <button type="button"
+//               onClick={handleDone} data-id={item.id}>완료
+//             </button>
+//             <button type="button"
+//               onClick={handleRemove} data-id={item.id}>삭제
+//             </button>
+//           </li>
+//         ))}
+//       </ul>
+//     </div>
+//   );
+// }
+
+
+
+// Code 4-2-12
+// import { useState } from 'react';
+// import './StateTodo.css';
+
+// let maxId = 0;
+// export default function StateTodo() {
+//   // 다음 정렬 방향 (내림차순인 경우 true)
+//   const [desc, setDesc] = useState(true);
+//   // 입력값(title), 할 일 목록(todo)을 State로 관리
+//   const [title, setTitle] = useState('');
+//   const [todo, setTodo] = useState([]);
+
+//   // 텍스트 상자에 입력한 내용을 State에 반영
+//   const handleChangeTitle = e => {
+//     setTitle(e.target.value);
+//   };
+
+//   const handleClick = () => {
+//     // 새 할 일 추가하기
+//     setTodo([
+//       ...todo,
+//       {
+//         id: ++maxId, // id 값
+//         title, // Todo 본체
+//         created: new Date(), // 생성 날짜 및 시각
+//         isDone: false // 실행 완료?
+//       }
+//     ]);
+//   };
+
+//   // [완료] 버튼으로 Todo 항목을 완료 상태로 변경
+//   const handleDone = e => {
+//     // todo 배열을 스캔하여 id 값이 같은 것을 검색한다.
+//     setTodo(todo.map(item => {
+//       if (item.id === Number(e.target.dataset.id)) {
+//         return {
+//           ...item,
+//           isDone: true
+//         };
+//       } else {
+//         return item;
+//       }
+//     }));
+//   };
+
+//   // [삭제] 버튼으로 해당 Todo 항목을 삭제한다.
+//   const handleRemove = e => {
+//     setTodo(todo.filter(item =>
+//       item.id !== Number(e.target.dataset.id)
+//     ));
+//   };
+
+//   const handleSort = e => {
+//     // 기존 Todo 목록을 복제하여 정렬하기
+//     const sorted = [...todo];
+//     sorted.sort((m, n) => {
+//       // desc 값에 따라 오름차순/내림차순 결정
+//       if (desc) {
+//         return n.created.getTime() - m.created.getTime();
+//       } else {
+//         return m.created.getTime() - n.created.getTime();
+//       }
+//     });
+//     // desc 값 반전
+//     setDesc(d => !d);
+//     // 정렬된 목록 재설정
+//     setTodo(sorted);
+//   };
+
+//   return (
+//     <div>
+//       <label>
+//         해야 할 일:
+//         <input type="text" name="title"
+//           value={title} onChange={handleChangeTitle} />
+//       </label>
+//       <button type="button"
+//         onClick={handleClick}>추가하기</button>
+//       {/* desc 값에 따라 캡션 변경 */}
+//       <button type="button"
+//         onClick={handleSort}>
+//          정렬({desc ? '↑' : '↓'})</button>
+//       <hr />
+
+//       {/* 할 일을 목록으로 정리하기 */}
+//       <ul>
+//         {todo.map(item => (
+//           <li key={item.id}
+//             className={item.isDone ? 'done' : ''}>
+//             {item.title}
+//             <button type="button"
+//               onClick={handleDone} data-id={item.id}>완료
+//             </button>
+//             <button type="button"
+//               onClick={handleRemove} data-id={item.id}>삭제
+//             </button>
+//           </li>
+//         ))}
+//       </ul>
+//     </div>
+//   );
+// }