반응형
LocalStorage에 저장하여 update되어도 데이터가 초기상태로 돌아가지 않도록 하는 기능을 구현하겠습니다.
componentWillMount API와 componentDidUpdate API만 구현해주면 됩니다.
Contact.js
import React, { Component } from 'react';
import ContactInfo from './ContactInfo';
import ContactDetails from './ContactDetails';
import ContactCreate from './ContactCreate';
class Contact extends Component {
constructor(props) {
super(props);
this.state = {
selectedKey: -1,
keyword: '',
contactData: [{
name: 'Abet',
phone: '010-000-0001'
}, {
name: 'Betty',
phone: '010-000-0002'
}, {
name: 'Charlie',
phone: '010-000-0003'
}, {
name: 'David',
phone: '010-000-0004'
}]
}
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleCreate = this.handleCreate.bind(this);
this.handleRemove = this.handleRemove.bind(this);
this.handleEdit = this.handleEdit.bind(this);
}
// 로컬 스토리지 데이터 가져오기 부분
componentWillMount() { // 컴포넌트가 마운트 되기 전에 실행되는 API
const contactData = localStorage.contactData;
if (contactData) { // 로컬 스토리지에 값이 있으면 JSON 변환하여 불러옴
this.setState({
contactData: JSON.parse(contactData)
})
}
}
componentDidUpdate(prevProps, prevState) { // 컴포넌트가 업데이트될 때마다 실행되는 API
if (JSON.stringify(prevState.contactData) != JSON.stringify(this.state.contactData)) { // 이전 값과 지금 값이 다르면
localStorage.contactData = JSON.stringify(this.state.contactData); // 지금 값을 입력해 줌
}
}
handleChange(e) {
this.setState({
keyword: e.target.value
})
}
handleClick(key) {
this.setState({
selectedKey: key
})
}
handleCreate(contact) {
var newContact = Array.from(this.state.contactData);
newContact.push(contact);
this.setState({
contactData: newContact
});
}
handleRemove() {
if (this.state.selectedKey < 0) {
return;
}
var newContact = Array.from(this.state.contactData);
newContact.splice(this.state.selectedKey, 1);
this.setState({
contactData: newContact,
selectedKey: -1
});
}
handleEdit(_name, _phone) {
var newContact = Array.from(this.state.contactData);
newContact[this.state.selectedKey] = { name: _name, phone: _phone };
this.setState({
contactData: newContact
});
}
render() {
const mapToComponents = (data) => {
data = data.filter((contact) => {
return contact.name.toLowerCase().indexOf(this.state.keyword.toLowerCase()) > -1;
})
return data.map((contact, i) => {
return (<ContactInfo
contact={contact}
key={i}
onClick={() => this.handleClick(i)}
/>);
})
}
return (
<div>
<h1>Contacts</h1>
<input
name="keyword"
placeholder="Search"
value={this.state.keyword}
onChange={this.handleChange}
/>
<div>{mapToComponents(this.state.contactData)}</div>
<ContactDetails
isSelected={this.state.selectedKey != -1}
contact={this.state.contactData[this.state.selectedKey]}
onRemove={this.handleRemove}
onEdit={this.handleEdit}
/>
<ContactCreate
onCreate={this.handleCreate}
/>
</div>
);
}
}
export default Contact;
반응형
'Programming > React' 카테고리의 다른 글
React에서 Highchart 사용하기 기초 예제 (0) | 2020.08.08 |
---|---|
React강좌2, 전화번호부 - 0.기본 파일 (0) | 2020.08.04 |
React강좌2, 전화번호부 - 5.Update 기능 (0) | 2020.08.03 |
React강좌2, 전화번호부 - 4.Delete 기능 (0) | 2020.08.03 |
React강좌2, 전화번호부 - 3.Create 기능 (0) | 2020.08.03 |
댓글