Study. React
Update & Delete 기능 구현
💡 아까 실행했을 때 에러가 나서 검색해서 고쳐도 해결이 안되길래 결국 이고잉님 코드 변경 사항에서 일일이 확인해보니까 내 코드에 오타가 있었다.. =을 -라고 적었던 것..
아무튼 이제 오류가 나지 않는다 ㅎㅅㅎ
[update 구현: from 작업]
📌update 버튼을 클릭했을 때 title에 원본이 남아있게 하기
📌input 태그 안에서 value={this.props.data.title} 이렇게 title 안에 저장된 값이 남아있게 함
📌UpdateContent.js
import React, { Component } from 'react';
class UpdateContent extends Component{
render(){
console.log(this.props.date);
console.log('UpdateContent render');
return(
<article>
<h2>Update</h2>
<form action="/create_process" method="post"
onSubmit={function(e){
e.preventDefault();
this.props.onSubmit(
e.target.title.value,
e.target.desc.value
);
}.bind(this)}>
<p>
<input
type="text"
name="title"
placeholder="title"
value={this.props.data.title}
onChange={function(e){
console.log(e.target.value);
}.bind(this)}
></input>
</p>
<p>
<textarea name="desc" placeholder="description"></textarea>
</p>
<p>
<input type="submit"></input>
</p>
</form>
</article>
);
}
}
export default UpdateContent;
📌컴포넌트 안에서 state화(가변적인 데이터)를 시켜주기 위해서 이 코드를 render() 함수 위에 추가
constructor(props){
super(props);
this.state = {
title:this.props.data.title
}
}
📌추가하고 input태그 안에서도 props.data에서 state로 바꿔줌
<p>
<input
type="text"
name="title"
placeholder="title"
value={this.state.title}
}.bind(this)}
></input>
</p>
📌그리고 input의 값을 바꿨을 때 state값을 바꿔줘야 ReadOnly 로 되지 않는다. 그럴려면 input 안에서 onChange를 써줘야 함. 그러면 이벤트가 발생할 때마다 input 태그의 value 값이 출력되도록 하였음
<p>
<input
type="text"
name="title"
placeholder="title"
value={this.props.data.title}
onChange={function(e){
console.log(e.target.value);
}.bind(this)}
></input>
</p>
<p>
📌그리고 실행해서 title에 값을 쓰면 하나씩만 추가되는 것을 알 수 있음
📌그래서 한 글자씩 바뀌는 것을 setState를 이용해 컴포넌트 state에 동기화 시켜준다.
onChange={function(e){
console.log(e.target.value);
this.setState({title:e.target.value})
}.bind(this)}
📌그러면 이렇게 정상적으로 동기화되는 것을 알 수 있음
📌그 다음은 description도 동적으로 바뀌도록 해주겠음
📌constructor에 이렇게 코드를 추가함
constructor(props){
super(props);
this.state = {
title:this.props.data.title,
desc:this.props.data.desc
}
}
📌그리고 textarea 태그에 state 화를 시켜줌
📌이때 textarea 안에
<textarea name="desc" placeholder="description">{this.state.desc}</textarea>
이렇게 추가하면 defaultValue나 value로 쓰라고 에러가 남
즉, React 에서 짜는 html 코드는 html이 아니라 유사 html임으로 우리가 아는 html과 동일하게 코드를 짜면 안된다.
어떻게 해줘야 하는가?
이렇게 value 값으로 줘야 한다.
<textarea name="desc" placeholder="description" value={this.state.desc}></textarea>
이렇게!
📌그럼 이렇게 원본이 나타난다.
📌그리고 이제 이걸 수정해서 update해주는 작업을 해보았다.
📌onChange를 추가해주고 수정까지 되는 작업을 해줬다.
<p>
<textarea
onChange={function(e){
this.setState({desc:e.target.value})
}.bind(this)}
name="desc"
placeholder="description"
value={this.state.desc}></textarea>]
</p>
📌일단 inputFormHandler함수를 만들어서 input태그와 textarea에 들어가는 것의 중복을 제거하고 코드를 더 깔끔하게 해준다.
inputFormHandler(e){
this.setState({title:e.target.value});
}
<p>
<input
type="text"
name="title"
placeholder="title"
value={this.state.title}
onChange={this.inputFormHandler.bind(this)}
></input>
</p>
📌이때 둘다 inputFormHandler 를 쓰면 둘다 같이 바뀌기 때문에 title값의 다르게 해준다.
자바스크립트의 문법을 이용해서 name값을 가져온다.
inputFormHandler(e){
this.setState({[e.target.name]:e.target.value});
}
그럼 이렇게 둘다 수정이 잘 된다.
📌그 후에 bind(this)를 반복적으로 하는게 번거로운데 이걸 간결하게 바꿔버린다.
constructor에
this.inputFormHandler = this.inputFormHandler.bind(this);
이렇게 추가하기
그럼 bind가 된 것을 다시 inputFormHandler로 넣어주기 때문에 밑에서 다시 써줄 필요가 없다.
constructor(props){
super(props);
this.state = {
title:this.props.data.title,
desc:this.props.data.desc
}
this.inputFormHandler = this.inputFormHandler.bind(this);
}
📌그 후에 밑에 input태그와 textarea태그에서 해줬던 bind(this)는 삭제해도 무방하다.
<p>
<input
type="text"
name="title"
placeholder="title"
value={this.state.title}
onChange={this.inputFormHandler}
></input>
</p>
<p>
<textarea
onChange={this.inputFormHandler}
name="desc"
placeholder="description"
value={this.state.desc}></textarea>]
</p>
📌이런 식으로 코드를 깔끔하게 만들어가는 '리팩토링'을 자주 해주어야 함
'🖊️Programming Language > 📌React' 카테고리의 다른 글
[React] Update & Delete 기능 구현 - delete 구현 (0) | 2021.05.20 |
---|---|
[React] Update & Delete 기능 구현 - state 변경 (0) | 2021.05.20 |
[React] Create 기능 구현 - immutable (0) | 2021.05.16 |
[React] Create 기능 구현 - mode 변경 & ShouldComponentUpdate (0) | 2021.05.09 |
[React] Create 기능 구현 - mode 변경 & form & onSubmit (0) | 2021.05.09 |
댓글