728x90 풀스택/React16 6. input import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.value }) } render() { return ( {this.state.name} ); }} export default PhoneForm; 위에 미리 앞서 배운 setState에서 e.target.value로 값을 정해준뒤 input의 텍스트 값이 바뀔때마다 발생하는 이벤트이다. 2019. 4. 23. 5-2. props, state props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트는 props를 받아오기만 가능, 받아온 props는 수정 불가. state는 컴포넌트 내부에서 선언, 값변경가능. App.jsimport React, { Component } from 'react';import MyName from './MyName'; class App extends Component { render() { return ( ); }} export default App; MyName를 import해야 사용 가능. 1. Myname.js에서 App.js 값을 들고 올 수 있다. App(부모)import React, { Component } from 'react'; class MyName extends Component .. 2019. 4. 21. 5-1. JSX 기본 정리 1. 열었으면 꼭닫아야된다.1234567891011121314// src/App.jsimport React, { Component } from 'react'; class App extends Component { render() { return ( ); }} export default App;cs 2. 두개의 엘리먼트는 하나의 엘리먼트로 감싸져야한다.1234567891011121314151617// src/App.jsimport React, { Component } from 'react'; class App extends Component { render() { return ( Hello Bye ); }} export default App;cs 3. 그냥 로 감싸주면 된다.12345678910111213.. 2019. 4. 19. 4. fetch 비동기형식 App3.js 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879import React, { Component } from "react";import "./App.css";import Movie from "./Movie"; class App extends Component { state = {}; componentWillMount() { //request API console.log("componentWillMount() called"); } //통신------- componentDidMou.. 2019. 4. 17. 이전 1 2 3 4 다음