\n\nInput 다루기
\n
\n\n부모 컴포넌트에 정보 전달하기
\n
전체 과정
\n\n\ne.preventDefault() 함수 : 페이지 리로딩 방지
\n
원래 form 에서 submit이 발생하면, 페이지를 리로딩함.
\n하지만, 페이지가 리로딩되면 원래 있던 값을 잃어버리기 때문에 e.preventDefault()함수를 통해서 리로딩을 방지함.
\nApp.js
\nimport React, {Component} from 'react';\nimport PhoneForm from './PhoneForm';\n\nclass App extends Component {\n handleCreate = (data) => {\n console.log(data);\n }\n render() {\n return (\n // <Counter/>\n <div>\n <PhoneForm\n onCreate={this.handleCreate}/>\n </div>\n );\n }\n}\n\nexport default App;PhoneForm.js
\nimport React, {Component} from 'react';\n\nclass PhoneForm extends Component {\n state = {\n name : '',\n phone : ''\n }\n // input의 onChange가 발생하면 호출되는 함수\n handleChange = (e) => {\n this.setState({\n // [e.target.name] : 이벤트가 발생한 input의 name\n [e.target.name] : e.target.value\n });\n // => 현재 input 상태를 이벤트 객체의 텍스트 값으로 변경\n }\n handleSubmit = (e) => {\n // 페이지 리로딩 방지\n e.preventDefault();\n // 상태값을 onCreate를 통하여 부모에게 전달\n this.props.onCreate(this.state);\n // 상태 초기화\n this.setState({\n name:'',\n phone:''\n });\n }\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <input \n placeholder=\"이름\"\n // submit을 클릭하면 초기화되도록 하기 위해 {this.state.name}객체 할당\n value={this.state.name}\n onChange={this.handleChange}\n // input의 name으로 각 input을 구분함\n name=\"name\"\n />\n <input\n placeholder=\"전화번호\"\n value={this.state.phone}\n onChange={this.handleChange}\n name=\"phone\"\n />\n <button type=\"submit\">등록</button>\n </form>\n );\n }\n}\nexport default PhoneForm;