[React] CRUD 삭제

react-student-crud

 

1. Studnt.js에 수정,삭제 버튼과 함수 만들어주기 

//수정, 삭제를 하려면 상태값이 변경되어야하니까 클래스 컴포넌트를 써야함
import { Component } from "react";
import '../css/Student.css';

class Student extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    updateStudentInfo=()=>{
        alert('수정!')
    }

    deleteStudentInfo=()=>{
        alert('삭제!')
    }
    render(){
        return(
            <div id='student'>
                <div>
                    학번:{this.props.id}
                </div>
                <div>
                    이름:{this.props.name}
                </div>
                <div>
                    전공:{this.props.major}
                </div>
                <div>
                    <button onClick={this.updateStudentInfo}>수정</button>
                    <button onClick={this.deleteStudentInfo}>삭제</button>
                </div>
            </div>
        )
    }
}
 
export default Student;

 

수정,삭제 버튼 누르면 경고창으로 이벤트 걸려있는지 확인하기. 

 

2. App.js 와 연결해주기 . 삭제버튼 

App.js 

  deleteStudentInfo=()=>{
    alert('삭제!(App)')
  }

App.js 

  render(){
    const result = this.state.studentList.map(
      (data) => (<Student key={data.id} //pk 개념 
                        id={data.id}
                        name={data.name}
                        major={data.major}
                        deleteStudentInfo={this.deleteStudentInfo}/>)
    )

Student.js

    deleteStudentInfo=()=>{
        alert('삭제!(Student)')
        this.props.deleteStudentInfo() //App의 삭제함수
    }

삭제 버튼 누르면 경고창에 삭제! (App) 까지 나오면 App.js 로 연결성공.

3. deleteStudentInfo() 괄호에 싫어서 보내기 

값이 하나니까 구조할당 안해줘도 됨 

Student.js

    deleteStudentInfo=()=>{
        alert('삭제!(Student)')
        //const {id}=this.props //구조분해할당 쓰려면 이렇게 써주기
        this.props.deleteStudentInfo(this.props.id) //App의 삭제함수
    }

App.js

  deleteStudentInfo=(id)=>{
    alert('삭제!(App)')
    alert('삭제할 학번:' +id) // 1000,2000,3000
  }

4. App.js 상태값 변경해주기 (삭제완료) 

App.js

  deleteStudentInfo=(id)=>{
    alert('삭제!(App)')
    alert('삭제할 학번:' +id) // 1000,2000,3000
    //splice, slice, ...,filter
    const filteredList = this.state.studentList.filter(
      (data) => (data.id !== id) //filter메서드로 배열id랑 넘어온 id랑 같지 않은 원소만 반환
    )

    this.setState({
      studentList:filteredList
    })
  }

삭제버튼 누르면 해당 학번의 배열은 화면에서 삭제가됨