day12: React를 이용한 전화번호부 페이지😏

코드

​

App.js

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

import CallInput from './CallInput';
import CallSearch from './CallSearch';
import SaramList from './SaramList';

function App() {

  const [saramList, setSaramList] = useState([
    {no:1, names:"홍길동",phoneNum:"010-1234-1111",email:"saram@naver.com"},
    {no:2, names:"김길동",phoneNum:"010-1234-1222",email:"saram1@naver.com"},
    {no:3, names:"이길동",phoneNum:"010-1234-1333",email:"saram2@naver.com"}
  ])

  const [searchList, setSearchList] = useState(saramList)


//save 
  function saveNumFn(names, phoneNum){
    let newData = {no:3, names:names, phoneNum:phoneNum, email:"add@naver.com"}
    let newList = [...saramList, newData];

    setSaramList(newList);
    setSearchList(newList);

  }
  function searchNum(keyword){
    let newList = saramList.filter(function(saram){
      return saram.names.indexOf(keyword) != -1;
    })
    if(newList){
    setSearchList(newList);
    }
  }
  
  return (<>
    <div>
      <h1>전화번호부</h1>
    </div>


    <CallInput onSave={saveNumFn} />
    <CallSearch onsearchNum={searchNum}/>
    <SaramList saramList={searchList} />
  
  </>);
}

export default App;

CallInput.js

 

import { useState } from 'react';



function CallInput({onSave}){
    const today = new Date().toISOString().substring(0,10);
    const [sarams, setsarams] = useState("추가사람1")
    const [call, setcall] = useState("010-1111-1234")
    const [email, setemail] = useState("newpeople@naver.com")
    const [openDate, setOpenDate] = useState("010-1111-1234")
    
    function saveData(event){

        onSave(sarams,openDate);
    }

    return(
        <div>
      {/* input form */}
    <fieldset>
        <legend>전화번호 정보 입력</legend>
        <label>이름</label>
        <input type="text" value={sarams} onChange={(e)=>{
        setsarams(e.currentTarget.value);
        }}/>

    <label>전화번호</label>
        <input type="text" value={call} onChange={(e)=>{
        setcall(e.currentTarget.value);
        }}/>

        <label>이메일</label>
        <input type="text" value={email} onChange={(e)=>{
        setemail(e.currentTarget.value);
        }}/> <button onClick={saveData}> 등록 </button>
    </fieldset>
    </div>

    )
}

export default CallInput;

CallSearch.js

import { useState } from 'react';

function CallSearch({onsearchNum}) {
const [CallSearch, setCallSearch] = useState()
return (
    <div>
      {/* search form */}
    <fieldset>
        <legend>전화번호부 검색</legend>
        <label>검색</label>
        <input
        type="text"
        value={CallSearch||''}
        onChange={(e) => {
            setCallSearch(e.currentTarget.value);
            
        }}

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

export default CallSearch;

SaramList.js

function SaramList({saramList}){
    return(
        <div>
        {/* list table */}
        <fieldset>
        <legend>번호 목록</legend>
        <table className='table'>
            <thead>
            <tr>
                <th>순서</th>
                <th>이름</th>
                <th>번호</th>
                <th>이메일</th>
                <th>삭제</th>
                <th>이메일 전송</th>
            </tr>
            </thead>

            <tbody>
            {saramList.map((person, i)=>{
                return(
            <tr key={i}>
                <td>{person.no}</td>
                <td>{person.names}</td>
                <td>{person.phoneNum}</td>
                <td>{person.email}</td>
                <td><button>삭제</button></td>
                <td><button>이메일 전송</button></td>
            </tr>)
            })}
            </tbody>
        </table>
        </fieldset>
    </div>
    
    )
}

export default SaramList;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div className="container">
    <App />
  </div>
);