컴포넌트 렌더링에 이어서~~
import React, { Component } from 'react';
class PhoneInfo extends Component {
static defaultProps = {
info: {
name: '이름',
phone: '010-0000-0000',
id: 0
}
}
render() {
const style = {
border: '1px solid black',
padding: '8px',
margin: '8px'
};
const {
name, phone, id
} = this.props.info;
return (
<div style={style}>
<div><b>{name}</b></div>
<div>{phone}</div>
</div>
);
}
}
export default PhoneInfo;
info 객체를 props로 받아와서 렌더링해줌
info값을 전달해주지 못할 경우 컴포넌트가 crash로 에러 발생함
info가 undefined일 때는 비구조화 할당을 이용해 내부의 값을 받아올 수가 없기 때문
그래서 defaultProps로 static값을 설정했음.
2) PhoneInfoList : 여러 개의 PhoneInfo를 보여줌
import React, { Component } from 'react';
import PhoneInfo from './PhoneInfo';
class PhoneInfoList extends Component {
static defaultProps = {
data: []
}
render() {
const { data } = this.props;
const list = data.map(
info => (<PhoneInfo key={info.id} info={info}/>)
);
return (
<div>
{list}
</div>
);
}
}
export default PhoneInfoList;
import React, { Component } from 'react';
import PhoneForm from './component/PhoneForm';
import PhoneInfoList from './component/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})
})
}
render() {
const { information } = this.state;
return (
<div>
<PhoneForm
onCreate = {this.handleCreate}
/>
<PhoneInfoList data={this.state.information} />
</div>
);
}
}
export default App;
const list = data.map(
(info, index) => (<PhoneInfo Key={index} info={info} />)
);
결론
배운것
const arr = [1, 2, 3, 4, 5];
arr.slice(0,2).concat(arr.slice(3,5)) // [1, 2, 4, 5]
//filter함수의 구문
arr.filter(callback(element[, index[, array]])[, thisArg])
//[]은 optional
//사용예
arr.filter(num => num !== 3); // [1, 2, 4, 5]