리엑트+스프링부트(5) 삭제처리

이번에 알아볼건 CRUD에서 정말 간단한 삭제이다.

나는 솔직히 데이터베이스에서 삭제를 하는것을 좋아하지않는다. 

왜냐하면 데이터는 항시 보존되어야한다고 생각한다.

그렇기떄문에 전에 프로젝트를 할 때도 타입을 주던가 y/n 이런식으로 구분을 했다.

하지만 아직 나는 JPA가 익숙하지 않아 그냥 아이디를 이용해 간단하게 삭제 처리를해보자. 

 

import axios from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Routes, Route, Link } from 'react-router-dom'
function Detail(props){

    let {id} = useParams();


    return(
        <>
    <div>
        글번호 : {props.board.id}
    </div>
    <div>
        제목 : {props.board.title}
    </div>
    <div>
        내용 : {props.board.content}
    </div>
    <div>
        <button onClick={()=>{
            axios.get(`/board/delete?id=${props.board.id}`)
            alert('삭제완료');
            window.location.href ="/";
        }}>삭제</button> 
        <button><Link to={`/modify/${props.board.id}`}>수정</Link></button>
    </div>

detail.js를 보면 

버튼을 클릭했을때 이벤트함수인 onClick을 사용하여 

axios로 넘겨준다.

 

그 후 컨트롤러와 통신한다. 

 

    @GetMapping("/board/delete")
    public void delete(Integer id){
    boardService.delete(id);
        System.out.println("완료");
    }

정말 간단하게 GetMapping으로 해보자 

원래 restful 방식인 Delete를 써야하지만 스프링부트 설정을 해주는 방법은 다음에 알아보도록하자 

설정을 하지않으면 put과 delte를 사용할 수없다 .

 

    public void delete(Integer id){
        boardRepository.deleteById(id);
    }

서비스에서 id를 지목하면 된다. id는 entity에 있는 id로 진행하면된다. 

 

실행화면 

 

글 번호 14번 게시물을 삭제하려고 한다 .

 

삭제 완료 라는 경고창과 함께

2022-05-26 01:52:52.935 DEBUG 908 --- [io-8090-exec-10] org.hibernate.SQL                        : 
    delete 
    from
        board 
    where
        id=?

인텔리제이 콘솔창에도 실행 되었다고 나오는것 같다. 

 

14번 게시물은 삭제되었다. 

 

https://github.com/MoonSeokHyun

MoonSeokHyun - Overview