$$config title: 22.08.02 [React] keywords: - IT - React $$ # 수업내용 --- ## react-todolist --- ### src > App,js ```js import React, { useRef, useState } from "react"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]); const nextId = useRef(1); const onInsert = (text) => { const todo = { id: nextId.current, text: text, checked: false, }; setTodos((todos) => todos.concat(todo)); nextId.current++; }; const onToggle = (id) => { setTodos((todos) => todos.map((todo) => todo.id === id ? { ...todo, checked: !todo.checked } : todo ) ); }; return ( ); } export default App; ``` --- ### src > index.js ```js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ``` ### src > componets > TodoInsert.jsx ```jsx import React, { useState } from "react"; import { MdAdd } from "react-icons/md"; import "../styles/TodoInsert.scss"; const TodoInsert = ({ onInsert }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); setValue(""); onInsert(value); }; return ( ); }; export default TodoInsert; ``` --- ### src > components > TodoList.jsx ```jsx import React from "react"; import TodoListItem from "./TodoListItem"; import "../styles/TodoList.scss"; const TodoList = ({ todos, onToggle }) => { return (

))}

); }; export default TodoList; ``` --- ### src > componets > TodoListItem.jsx ```jsx import React from "react"; import { MdCheckBoxOutlineBlank, MdRemoveCircleOutline, MdCheckBox, MdModeEditOutline, } from "react-icons/md"; import cn from "classnames"; import "../styles/TodoListItem.scss"; const TodoListItem = ({ todo, onToggle }) => { const { id, text, checked } = todo; return (

{ onToggle(id); }} > {checked ? : }

{text}

{}}>

); }; export default TodoListItem; ``` --- ### src > componets > TodoTemplate.jsx ```jsx import "../styles/TodoTemplate.scss"; function TodoTemplate({ children }) { return (

Todo List

{children}

); } export default TodoTemplate; ``` --- ### src > styles > TodoInsert.scss ```scss .TodoInsert { display: flex; background: #495057; input { width: 100%; background: none; outline: none; border: none; padding: 0.5rem; font-size: 1.125rem; line-height: 1.5; color: white; &::placeholder { color: #dee2e6; } } button { background: none; outline: none; border: none; background: #868e96; color: white; padding: 0 1rem; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; transition: 0.1s background ease-in; &:hover { background: #adb5bd; } } } ``` --- ### src > styles > TodoList.scss ```scss .TodoList { padding: 0; list-style: none; min-height: 320px; max-height: 513px; overflow-y: auto; } ``` --- ### src > styles > TodoListItem.scss ```scss .TodoListItem { padding: 1rem; display: flex; align-items: center; } .TodoListItem-virtualized { & + & { border-top: 1px solid #dee2e6; } &:nth-child(even) { background-color: #f8f9fa; } } .checkbox { cursor: pointer; flex: 1; display: flex; align-items: center; svg { font-size: 1.5rem; } .text { margin-left: 0.5rem; } &.checked { svg { color: #9c88ff; } .text { color: #adb5bd; text-decoration: line-through; } } } .remove { display: flex; align-items: center; font-size: 1.5rem; color: #e84118; cursor: pointer; &:hover { color: #ff7f5f; } } .edit { display: flex; align-items: center; font-size: 1.5rem; cursor: pointer; margin-right: 1rem; } ``` --- ### src > styles > TodoTemplate.scss ```scss .TodoTemplate { width: 512px; margin: 6rem auto 0 auto; border-radius: 4px; overflow: hidden; } .app-title { background: #9c88ff; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { background: white; } ``` --- ## sass 안될때 -> sass 재설치 npm uninstall sass npm install sass react-icons npm install react-icons ## npm i classnames < 클래스이름 추가해주는 확장프로그램