<step65>'react_todolist실습'

1)

App.js

import './App.css';
import { useState, useRef } from 'react';
import CreateTodo from './components/CreateTodo';
import TodoList from './components/TodoList';
function App() {
//CreateUser의 입력 인풋을 상태관리
const [ inputs, setInputs ] = useState({
  todo: '',
});
const onChange = (e) => {
  const {name, value} = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  })
  console.log(inputs);
}
const {todo} = inputs;
//useState()실행 -> 배열 return
//arr[0] = 상태
//arr[1] = 상태를 변경해주는 f
const [users,setUsers] = useState([

])
const nextId = useRef(1);
//배열에 새로운 항목을 추가하는 함수
//users 배열에 새로운 user 객체를 추가
const onCreate = () => {
  //새로운 user 객체 생성
  const user = {
    id: nextId.current,
    todo, // = username: username
    active: false,
  }
  setUsers([...users,user]);
  setInputs({
    todo: '',
  })
  nextId.current += 1;
}
const onDelete = (id) => {
  setUsers(users.filter(user=>id !== user.id));
}
const onToggle = (id) => {
  setUsers(users.map(user=> id ===user.id? {...user, active : !user.active} : user));
}
  return (
    <div className="App">
        <CreateTodo todo={todo} onChange={onChange} 
        onCreate={onCreate}></CreateTodo>
        <TodoList users={users} onDelete={onDelete} onToggle={onToggle} />
    </div>
  );
}

export default App;

CreateTodo.js

import React from 'react';
import './TodoList.css';

const CreateUser = ({todo, onChange, onCreate}) => {
    return (
        <div id="wrap">
            <h1>to do list</h1>
            <input name="todo" value={todo}
            onChange={onChange} />
            <button onClick={onCreate}>+</button>
        </div>
    );
};

export default CreateUser;

TodoList.js

import React from 'react';

const User = ({user, onDelete, onToggle}) => {
    return (
        <div>
            <span className={user.active ? 'active' : ""} onClick={()=>{onToggle(user.id)}}>
                {user.todo}
            </span>
            <button id="btn" onClick={()=>{onDelete(user.id)}}>x</button>
        </div>
    )
}

const UserList = ({users, onDelete, onToggle}) => {
    return (

        <div id='lists'>
            {users.map(user => <User user={user} key={user.id} onDelete={onDelete} onToggle={onToggle}/>)}
        </div>
    );
};

export default UserList;

TodoList.css

* {padding: 0; margin: 0 auto;box-sizing: border-box;}
#wrap {
    width: 1000px;
    height: 150px;
    background-color: red;
    margin: 0 auto;
    padding-top: 30px;
}
h1 {
    color: #fff;
}
input {
    border-radius: 20px;
    outline: none;
    border: none;
    padding: 10px 20px;
    width: 600px;
}
button {
    border: none;
    background-color: #fff;
    padding: 3px 10px;
    font-size: 20px;
    border-radius: 100%;
    margin-left: 20px;
}
#lists {
    background-color: #eee;
    width: 1000px;
    text-align: left;
}
#lists div {
    padding: 10px 50px;
    font-size: 20px;
}
.active {
    background-color: #ccc;
    border-radius: 5px;
    padding: 0 5px;
}
#btn {
    border: none;
    background-color: #fff;
    padding: 1px 7px;
    font-size: 15px;
    border-radius: 100%;
}