$$config title: 학원 15일차 (components 나누기 ?) keywords: - REACT - SASS? SCSS? $$ # 할 일 추가 ## 세팅 - sass 설치 `npm install sass` 설치 `npm uninstall sass` 삭제 - react-icons 설치 `npm install react-icons` 설치 ## App.jsx ```jsx import React, { useRef, useState } from "react"; import TodoInsert from "./components/TodoInsert"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]); const nextId = useRef(1); const onInsert = (text) => { const todo = { id: nextId, text: text, checked: false, }; setTodos((todos) => todos.concat(todo)); nextId.current++; }; return ( ); } export default App; ``` --- ## TodoTemplate.jsx ```jsx import "../styles/TodoTemplate.scss"; function TodoTemplate({ children }) { return (

Todo List

{children}

); } export default TodoTemplate; ``` --- ## 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; ``` --- ## 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; } ``` --- ## 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; } } } ``` ---

# 할 일 체크 ## 세팅 - `npm install classnames` : 서로 다른 효과를 가진 css 코드를 하나의 컴포넌트에 병합해서 적용할 때 사용 ?? ## App.jsx ```jsx 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; ``` --- ## 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 (

{ alert("체크박스 눌림"); // onToggle(id); }} > {checked ? : }

{text}

{}}>

); }; export default TodoListItem; ``` --- ## TodoList.jsx ```jsx import React from "react"; import TodoListItem from "./TodoListItem"; import "../styles/TodoList.scss"; const TodoList = ({ todos, onToggle }) => { return (

))}

); }; export default TodoList; ``` ---