[React] CRUD

 

| App.js

import React, { Component } from 'react';
import { BrowserRouter, Link, Route } from 'react-router-dom';

import Home  from './components/Home.js'
import Profile  from './components/Profile.js'
import About  from './components/About.js'
import './css/style.css'


class  App extends Component { 

    render(){
      
      return (
        <div>
        <BrowserRouter>
          <ul className="menu-wrapper">
             <li><Link to="/"> HomeA </Link></li>
             <li><Link to="/profile"> ProfileA </Link></li>
             <li><Link to="/about"> AboutA </Link></li>
          </ul>
          <Route  exact path="/" component={Home} />
          <Route  exact path="/profile" component={Profile} />
          <Route  exact path="/about" component={About} />
        </BrowserRouter>
        </div>
      );
    }// render end
}

export default App;

 

| Home.js

 

import React, {Component}  from 'react';
import PhoneForm  from './PhoneForm.js'
import PhoneInfoList from './/PhoneInfoList.js';
import { BrowserRouter, Link, Route } from 'react-router-dom';

class Home extends Component{
    id=2;
    state={
      information:[
        { id:0, name:'zero', phone:'000' },
        { id:1, name:'hong', phone:'111'}
      ],
      msg: []
    }//end

    //신규등록
    handleCreate = (data) =>{
      const { information } = this.state;
      this.setState({
        information: information.concat({id:this.id++, ...data})
      })
      console.log(data);
    }//end

    //삭제처리함수
    handleRemove = (id) =>{
      const {information } = this.state ;
      this.setState({
        information: information.filter(info => info.id != id) // 아닌것을 빼오겠다 111이아닌것을 가져오겠다
      })
    }//end

    //수정처리
    handleUpdate = (id,data) => {
      const { information } = this.state ;
      this.setState({
        information: information.map(
          info => id === info.id ? {...info, ...data} : info
        )
      })
    }//end

    render(){
        const {information} = this.state ;

        const style={
            border: '1px solid black' ,
            padding: '8px',
            margin: '8px'
        };

       
        return(
            <div style={style}>
                  <h1>단비 React CRUD </h1>

            <PhoneForm 
                //onCreate={this.handleCreate}처리함 
                 onABC={this.handleCreate}
            />
   
             <PhoneInfoList
              data={this.state.information}
              onRemove={this.handleRemove}
              onUpdate={this.handleUpdate}
             />
            </div>
         ); 
        }

}; //class END

export default Home;

 

| 폴더구조