velopert를 보며 공부하는 React
📌데이터 제거와 수정
👀 데이터 제거
- 데이터 제거 역시 추가와 마찬가지로 기존의 배열 데이터를 건들이지 않으면서 데이터를 제거해야 함.
const arr = [1,2,3,4,5]에서 3을 제거하는 상황array.slice(0,2).concat(array.slice(3,5))[ ...array.slice(0,2), ...array.slice(3,5) ]
- 그러나 위보다 더욱 간단한 방법으로도 구현 가능.
FILTER라는 내장함수 : 특정 조건에 부합되는 원소들만 뽑아내서 새 배열을 만들어줌.array.filter(num => num!==3): 3이 제외된 배열.
👀 전의 예제로 실습.
💻App.js
import React,{Component} from 'react';
import PhoneForm from './components/PhoneForm';
import PhoneInfoList from './components/PhoneInfoList';
class App extends Component {
id = 2
state = {
information :[
{
id: 0,
name: '김민준',
phone: '010-0000-0000'
},
{
id:1,
name:'홍길동',
phone: '010-0000-0001'
}
]
}
handleCreate = (data) =>{
const {information} = this.state;
this.setState({
information: information.concat({id:this.id++, ...data})
})
}
handleRomove = (id) =>{
const {information} = this.state;
this.setState({
information: information.filter(info => info.id!==id)
})
}
render() {
return (
<div>
<PhoneForm
onCreate={this.handleCreate}/>
<PhoneInfoList data ={this.state.information}
onRemove = {this.handleRomove} />
</div>
);
}
}
export default App;
- handleRemove 함수를 filter 내장함수를 통해 만들어줌.
- 이 함수를 PhoneInfoList 컴포넌트에 넘겨줌.
💻 PhoneInfoList.js
import React, {Component} from 'react';
import PhoneInfo from './PhoneInfo';
class PhoneInfoList extends Component {
static defaultProps ={
list:[],
onRemove : () => console.warn('onRemove not defined'),
}
render(){
const {data, onRemove} = this.props;
const list = data.map(
info => (<PhoneInfo key={info.id} info={info} onRemove = {onRemove} />)
);
return (
<div>
{list}
</div>
)
}
}
export default PhoneInfoList;- Props를 못받을 경우를 대비해 defaultProps에 대비.
- PhoneInfo에 onRemove 넘겨줌.
💻 PhoneInfo.js
import React, { Component } from 'react';
class PhoneInfo extends Component {
static defaultProps = {
info: {
name: '이름',
phone: '010-0000-0000',
id: 0
}
}
handleRemove = () => {
const {info, onRemove} = this.props;
onRemove(info.id);
}
render(){
const style ={
border: '1px solid black',
padding : '8px',
margin : '8px'
};
const {
name, phone
} = this.props.info;
return (
<div style={style}>
<div><b>{name}</b></div>
<div>{phone}</div>
<button onClick={this.handleRemove}>삭제</button>
</div>
)
}
}
export default PhoneInfo;- handleRemove 함수에 props로 받은 onRemove 함수 사용하여 함수 만들어줌.
- info.id를 매개변수로 넣어주어 해당 id를 제외한 값 return
- button 으로 handleRemove 함수 넣어줌.
👀 데이터 수정
- 데이터 수정 또한 불변성을 지켜줘야 함.
💻App.js
class App extends Component {
...
handleUpdate = (id,data) =>{
const { information } = this.state;
this.setState({
information: information.map(
info => id === info.id
? {...info, ...data}
: info
)
})
}
render() {
return(
<div>
<PhoneForm onCreate={this.handleCreate} />
<PhoneInfoList data={this.state.information} onRemove={this.handleRemove} onUpdate={this.handleUpdate} />
</div>
);
}
}{...info, ...data}: 새 객체를 만들어서 기존의 값과 전달받은 data를 덮어씀.data: 기존의 값을 그래도 유지.
💻PhoneInfoList.js
class PhoneInfoList extends Component {
static defaultprop ={
data:[],
onRemove:() ~
onUpdate:() ~
}
render() {
const {data, onremove, onUpdate} = this.props;
const list = data.map(
info => (
<PhoneInfo
key = {info.id}
info = {info}
onRemove = {onRemove}
onUpdate = {onUpdate} />)
);
return(
<div>
{list}
</div>
);
}
}💻PhoneInfo.js
class PhoneInfo extends Component{
static defaultProps = {
info: {
name: '이름',
phone: '010-0000-0000',
id: 0
},
}
state = {
editing: false,
name:'',
phone:'',
}
handleRemove = () => {
const {info, onRemove} = this.props;
onRemove(info.id);
}
handleToggleEdit = () => {
const {editing} = this.state;
this.setState({editing:!editing});
}
handleChange = (e) =>{
const {name, value} = e.target;
this.setState({
[name]:value
});
}
componentDidUpdate(prevProps, prevState) {
const {info, onUpdate} = this.props;
if(!prevState.editing && this.state.editing) {
this.setState({
name: info.name,
phone: info.phone
})
}
if(prevState.editing && !this.state.editing){
onUpdate(info.id, {
name: this.state.name,
phone: this.state.phone
});
}
}
render() {
const {editing} = this.state;
if(editing){
return(
<div style = {style}>
<div>
<input value={this.state.name} name="name" placeholder="이름" onChange={this.handleChange} />
</div>
<div>
<input value={this.state.phone} name="phone" placeholder="전화번호" onChange={this.handleChange} />
</div>
<button onClick={this.handleToggleEdit}>적용</button>
<button onClick={this.handleRemove}>삭제</button>
</div>
const {
name, phone
} = this.props.info;
return(
<div style={style}
<div><b>{name}</b></div>
<div>{phone}</div>
<button onClick={this.handleToggleEdit}>수정</button>
<button onClick={this.handleRemove}>삭제</button>
</div>
);
}}state수정 버튼을 누른 경우 editing 값을 true로 설정.- 유동적인 editing 값을 위하여 state 값에 넣어줌.
handleToggleEdit: editing 값을 반전시켜주는 함수.editing:!editinghandleChange: onChange 이벤트를 처리해주는 함수.componentDidUpdate: editing 값이 바뀌는 경우를 처리해주는 함수.- 수정을 눌렀을 때, 기존의 값이 input에 나타나고
- 수정을 적용할 때, input의 값들을 부모에게 전달.
if(!prevState.editing && this.state.editing): editing 값이 false -> true 전환시this.setState({ name: info.name, phone:info.phone}): info의 값을 state에 삽입.if(prevState.editing && !this.state.editing): editing 값이 true -> false 전환시onUpdate(info.id, {name: this.state.name, phone: this.state.phone}): onUpdate 함수 실행.
<출처 : velopert>
의 공부 노트.