React - 배열에 데이터 삽입하기

자식 컴포넌트가 부모한테 값을 전달하려면 app 컴포넌트 내에서 handleCreate라는 메소드를 만든 후 자식 컴포넌트에 props로 전달해주고 호출시켜서 데이터가 app한테 들어가게끔 한다.

App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import PhoneForm from './components/PhoneForm';


class App extends Component{

  id = 0; //렌더링 되는 값이 아니라 state에 넣을 필요 없음. 넣었던 값이 수정되면 리렌더링을 위해 하지만 필요 없음.

  state = {
    information: [],
  }

  handleCreate = (data) => {
    console.log(data);
    //this.state.information.push(data)안됨
    //this.setState() 뭐뭐뭐 안됨.
    //리액트에서는 불변성을 유지해야 함. 내부의 배열이나 객체를 바꿀 때는 새로운 배열. 객체를 만들어서 주입해야 함.
    const {information} = this.state;
    
    this.setState({
      information: information.concat({
        ...data,
        id: this.id++
      }) //배열 내장 함수 사용
    });
  }

  render(){
    return (
      <div classname="App">
        뭐양
        <PhoneForm onCreate={this.handleCreate}/>
        {JSON.stringify(this.state.information)}
        </div>
    )

  }

}

export default App;

PhoneForm.js

//rcc, rcs
import React, { Component } from 'react';

class PhoneForm extends Component {
    state = {
        name : '',
        phone: '',
    }


    handleChange = (e) =>{ //e는 이벤트 객체
        this.setState({
            [e.target.name]: e.target.value //input이 event.target
        })
    }

    handleSubmit = (e)=>{ //새로고침되는거 방지함.
        e.preventDefault();
        this.props.onCreate(this.state); //props로 받은 거를 호출하는 거임.
        this.setState({
            name: '',
            phone: '',
        })
    }

    render() {
        return (
            <div>
                이것은 PhoneForm 이라네.

                <form onSubmit={this.handleSubmit}>
                    <input 
                    name="name"
                    placeholder="기본값.이름" 
                    onChange={this.handleChange} 
                    value={this.state.name}
                    />
                    
                    <input 
                    name="phone"
                    placeholder="전화번호" 
                    onChange={this.handleChange}
                    value={this.state.phone}
                    />
                    <button type="submit">등록</button>
                </form>
            </div>
        );
    }
}

export default PhoneForm;

Share this post