React강좌2, 전화번호부 - 3.Create 기능

Create 기능구현은 두 부분으로 나누어 생각할 수 있습니다.
  1. ContactCreate 컴포넌트(신규)에서 신규 데이터 생성 기능, 과
  2. Contact 컴포넌트에서 전달받은 data를 기존 state(배열)에 추가하는 기능

입니다.

 

ContactCreate.js

import React from 'react';

export default class ContactCreate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            phone: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e) {   // input 창에 입력 가능하도록 만듬
        let nextState = {};
        nextState[e.target.name] = e.target.value;	// name에는 name입력값, phone에는 phone 입력값을 각각 저장
        this.setState(nextState)
    }

    handleClick() {
        const contact = {   // 한번 만들어지면 수정할 일이 없으므로  const로 선언
            name: this.state.name,
            phone: this.state.phone
        };

        this.props.onCreate(contact);

        this.setState({
            name: '',
            phone: ''
        });
    }

    render() {
        return (
            <div>
                <h2>Create Contact</h2>
                <p>
                    <input
                        type="text"
                        name="name"
                        placeholder="name"
                        value={this.state.name}
                        onChange={this.handleChange}
                    />
                    <input
                        type="text"
                        name="phone"
                        placeholder="phone"
                        value={this.state.phone}
                        onChange={this.handleChange}
                    />
                </p>
                <button onClick={this.handleClick}>Create</button>
            </div>
        )
    }
}

 

Contact.js

import React, { Component } from 'react';
import ContactInfo from './ContactInfo';
import ContactDetails from './ContactDetails';
import ContactCreate from './ContactCreate';


export default class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedKey: -1,
            keyword: '',
            contactData: [{
                name: 'Abet',
                phone: '010-000-001'
            }, {
                name: 'Betty',
                phone: '010-000-002'
            }, {
                name: 'Charlie',
                phone: '010-000-003'
            }, {
                name: 'David',
                phone: '010-000-004'
            }]
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);

        this.handleCreate = this.handleCreate.bind(this);        
    }

    handleChange(e) {
        this.setState({
            keyword: e.target.value
        })
    }

    handleClick(key) {
        this.setState({
            selectedKey: key
        });
        console.log(key, 'is selected');
    }

    
    handleCreate(contact) {
        var newContact = Array.from(this.state.contactData);
        newContact.push(contact);
        this.setState({
            contactData: newContact
        });
    }

  
    render() {
        const mapToComponents = (data) => {     // 배열형 data 받아들임
            data.sort();    // 오름차순정렬
            data = data.filter((_contact) => {
                return _contact.name.toLowerCase().indexOf(this.state.keyword.toLowerCase()) > -1;   // contact 배열에서 keyword를 포함하는(indexOf) 요소를 찾아서(-1 보다 큰..) 반환 (모두 소문자로 변환하여 비교)
            })
            return data.map((_contact, i) => {   // 배열의 1개 원소 _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} // selectedKey가 -1이 아니면 참을 전달 
                    contact={this.state.contactData[this.state.selectedKey]}
                />
                <ContactCreate
                    onCreate={this.handleCreate}
                />
            </div>
        );
    }
}