[react] react 실전 & Rest API ③ - 글 삭제, 자동 새로고침 본문

Web/React

[react] react 실전 & Rest API ③ - 글 삭제, 자동 새로고침

미니모아 2020. 4. 13. 23:41
반응형
  1. 글을 추가하면 자동으로 새로고침 될 수 있도록 refresh 해보자
    handlingSubmit에서 getPost를 하면 된다.
  2. 글을 삭제해보자
    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()
 }
반응형
Comments