$$config title: [React] Todo-list 아이콘을 포함한 기능 만들기1 - 체크박스 기능까지 keywords: - React $$ # 찾아볼 것 1. 토글 이벤트(onToggle) → [참조 블로그 링크](https://homzzang.com/b/js-1381) - 요소를 열거나 닫을 때 이벤트 발생. - 요소는 사용자가 요청 시 보거나 숨길 수 있는 추가 세부 정보를 지정함. - ON/OFF를 간편화 - **JS 속성방식** ```js object.ontoggle = function(){myScript}; ``` - **[JS 속성방식 예제](https://codepen.io/sinbi/pen/MWOErwa)** $$codepen https://codepen.io/sinbi/embed/MWOErwa?default-tab=html%2Cresult $$ --- - JS method 방식 ```js object.addEventListener("toggle", myScript); ``` - [JS method 방식 예제](https://codepen.io/sinbi/pen/NWwaXqV) $$codepen https://codepen.io/sinbi/embed/NWwaXqV?default-tab=html%2Cresult $$ concat useRef # 사전 세팅 ```cmd sass 안될때 -> sass 재설치 npm uninstall sass npm install sass react-icons npm install react-icons npm install classnames ``` # 1. App.js ```js import React, { useRef, useState } from "react"; import TodoInsert from "./components/TodoInsert"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]); //ID가 될 값. const nextId = useRef(1); //onInsert를 다른 컴포넌트에서도 사용하려고 여기에다가 선언해둠. const onInsert = (text) => { const todo = { id: nextId, text: text, checked: false, }; setTodos((todos) => todos.concat(todo)); nextId.current++; }; const onToggle = id = { } return ( ); } export default App; ``` # 2. components > 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; ``` # 3. components > TodoList.jsx ```js import React from "react"; import TodoListItem from "./TodoListItem"; const TodoList = ({ todos }) => { return (

{todos.map((todo, index) => ( ))}

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

{checked ? : }

{text}

{}}>

); }; export default TodoListItem; ``` # 5. components > TodoTemplate.jsx ```js import "../styles/TodoTemplate.scss"; function TodoTemplate({ children }) { return (

Todo List

{children}

); } export default TodoTemplate; ``` # 6. styles>TodoInsert.scss ```css .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; } } } ``` # 7. styles>TodoList.scss ```css .TodoList { padding: 0; list-style: none; min-height: 320px; max-height: 513px; overflow-y: auto; } ``` # 8. styles>TodoListItem.scss ```css .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; } ``` # 9. styles>TodoTemplate.scss ```css .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; } ```