React강좌2, 전화번호부 - 6.LocalStorage에 저장하기

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;