day13: React 이용한 TodoList 만들기✍💦

✍react 와 redux 에대해 공부하였음.
day12날 만들었던 전화번호부 페이지 틀을 이용해서 만들었다.😄 

---

소스 코드

app.js

import { useState } from 'react';
import './App.css'

import TodoInput from './TodoInput';
import TodoSearch from './TodoSearch';
import TodoList from './TodoList';

function App() {

  const [todoList, setTodoList] = useState([
    {no:1, names:"운동 하기"},
    {no:2, names:"음악 듣기"},
    {no:3, names:"강아지 산책"}
  ])

  const [searchList, setSearchList] = useState(todoList)


//save 
  function saveTodoFn(names, phoneNum){
    let newData = {no:3, names:names}
    let newList = [...todoList, newData];

    setTodoList(newList);
    setSearchList(newList);

  }
  function searchTodo(keyword){
    let newList = todoList.filter(function(todo){
      return todo.names.indexOf(keyword) != -1;
    })
    if(newList){
    setSearchList(newList);
    }
  }
  
  return (<>
    <div>
      <h1>TodoList</h1>
    </div>


    <TodoInput onSave={saveTodoFn} />
    <TodoSearch onsearchTodo={searchTodo}/>
    <TodoList todoList={searchList} />
  
  </>);
}

export default App;

TodoSearch.js

import { useState } from 'react';

function TodoSearch({onsearchTodo}) {
const [TodoSearch, setTodoSearch] = useState()
return (
    <div>
      {/* search form */}
    <fieldset>
        <legend>할일 검색</legend>
        <label>검색</label>
        <input
        type="text"
        value={TodoSearch||''}
        onChange={(e) => {
            setTodoSearch(e.currentTarget.value);
            
        }}

        onKeyUp={(e)=>{
            onsearchTodo(e.currentTarget.value);
        }}
        
        />{" "}
        <span>{TodoSearch}</span>
        <br />
    </fieldset>
    </div>
);
}

export default TodoSearch;

TodoInput.js

function TodoList({todoList}){
    return(
        <div>
        {/* list table */}
        <fieldset>
        <legend>목록</legend>
        <table className='table'>
            <thead>
            <tr>
                <th>순서</th>
                <th>이름</th>
                <th>삭제</th>
                
            </tr>
            </thead>

            <tbody>
            {todoList.map((person, i)=>{
                return(
            <tr key={i}>
                <td>{person.no}</td>
                <td>{person.names}</td>
                <td><button  onClick={(e) => {
                                todoList.onDelete(person.i);
                            }}>삭제</button></td>

            </tr>)
            })}
            </tbody>
        </table>
        </fieldset>
    </div>
    
    )
}

export default TodoList;

TodoList.js

import { useState } from 'react';


function TodoInput({onSave}){
    
    const [todo, settodo] = useState(" 배운거 복습하기 ")
    
    function saveData(event){

        onSave(todo);
    }

    return(
        <div>
      {/* input form */}
    <fieldset>
        <legend>할일 입력</legend>
        <label>할일</label>
        <input type="text" value={todo} onChange={(e)=>{
        settodo(e.currentTarget.value);
        }}/>

        <button onClick={saveData}> 등록 </button>
    </fieldset>
    </div>

    )
}

export default TodoInput;