공부기록, 2021-07-27(react)

react데이터 전달
```
import React, { Component } from "react";
import PhoneForm from "./components/PhoneForm";

class App extends Component {

handleCreate = (data) => {
console.log(data);
}
render() {
return (

);
}
}

export default App;
import React, { Component } from 'react';

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

handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleSubmit = (e) => {
e.preventDefault();
this.props.onCreate(this.state);
}
render() {
return (

등록

);
}
}

export default PhoneForm;
```
- PhoneForm에서 입력 받은 input값을 onChange를 사용해서 값의 변화가 생길 때 마다 자신의 state에 동기화한다.
- App의 handleCreate 메소드를 PhoneForm의 onCreate라는 props로 전달한다.
- 사용자가 등록 버튼을 누르면(onSubmit 하면) e.preventDefault()로 페이지전환을 막고 props로 전달된 onCreate(=handleCreate) 함수의 매개변수로 state 객체를 넘긴다.
- 전달 받은 하위 컴포넌트의 state 객체를 App의 내부 메소드인 handleCreate에서 사용할 수 있다.