반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 배열
- 프로그래머스
- Doitvue.js입문
- web
- Medium
- LeetCode
- dp
- Level3
- 고득점Kit
- typescript
- 백준
- sql
- C++
- 리액트
- 자바스크립트
- python
- javascript
- react
- 리트코드
- Level2
- 동적계획법
- 카카오
- CS
- Level1
- 파이썬
- 웹프로그래밍
- 프로그래밍
- OS
- 코테연습
- VUE
Archives
- Today
- Total
[react] react 실전 & Rest API ③ - 글 삭제, 자동 새로고침 본문
반응형
- 글을 추가하면 자동으로 새로고침 될 수 있도록 refresh 해보자
handlingSubmit에서 getPost를 하면 된다. - 글을 삭제해보자
api.js에 deletePost를 추가해준다.App.js로 돌아와서 삭제 버튼을 만들고 onClick했을 때 handlingDelete가 동작 되도록 한다.
handlingDelete = async (event) => {
await api.deletePost(event.target.value) //delete 완료 후에 새로고침 되도록 동기화 시킴
this.getPosts()
}
render(){
return (
(내용 생략)
this.state.results.map((post) =>
<div> // 이거 안 감싸면 오류남 <> </>로 감싸도 됨
<PostView
key = {post.id}
id = {post.id} title={post.title}
content={post.content} />
<button
value={post.id}
onClick={this.handlingDelete}>삭제하기</button>
</div>
//글 삭제하기
deletePost(id){ return axios.delete('/posts/'+String(id)) }
handlingSubmit = async (event) => {
event.preventDefault()
let result = await api.createPost({
title:this.state.title,
content:this.state.content
})
console.log("완료됨!",result)
this.setState({title:'',content:''}) //입력칸 값 초기화
this.getPosts()
}
반응형
'Web > React' 카테고리의 다른 글
[react] react 실전 & Rest API ④ - MATERIAL - UI (0) | 2020.04.14 |
---|---|
[react] react 실전 & Rest API ② - postView 만들기 (0) | 2020.04.13 |
[react] react 실전 & Rest API ① - API 만들기 (0) | 2020.04.13 |
[react] event handling & lifecycle ③ - hook과 정리 (0) | 2020.04.13 |
[react] event handling & lifecycle ② - lifecycle (0) | 2020.04.13 |
Comments