이 튜토리얼에서는 http 삭제 요청을 반응으로 보내는 방법을 배웁니다. 우리는 axios와 React를 사용하여 http 삭제 요청을 보내는 아주 간단한 예제를 제공할 것입니다.
Axios는 npm 패키지이며 애플리케이션에서 http 요청을 제공합니다. 이 예제에서는 "jsonplaceholder" api를 사용하여 axios 패키지를 사용하여 데이터를 삭제합니다.
import React from 'react';
import axios from 'axios';
export default class PostList extends React.Component {
state = {
posts: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/posts`)
.then(res => {
const posts = res.data;
this.setState({ posts });
})
}
deleteRow(id, e){
axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`)
.then(res => {
console.log(res);
console.log(res.data);
const posts = this.state.posts.filter(item => item.id !== id);
this.setState({ posts });
})
}
render() {
return (
<div>
<h1>React Axios Delete Request Example</h1>
<table className="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.posts.map((post) => (
<tr>
<td>{post.id}</td>
<td>{post.title}</td>
<td>{post.body}</td>
<td>
<button className="btn btn-danger" onClick={(e) => this.deleteRow(post.id, e)}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
}
행복한 코딩!!!