728x90 풀스택77 7-1 카운터 예제(react) react로만 이루어진 기본적인 카운터 예제 counter component - 계산된 값을 화면에 나타냄option - 계산할 값 입력받고 부모 컴포넌트로 전달button - 더할지 뺄지 선택할 버튼 나타냄 App - 공통부모, counter에 표시되는 값과 계산될값을 state로 가지고 있어야함.또한 버튼이 클릭될때마다 발생한 이벤트를 전달받아 counter에 표시되는 값을 계산하여 state에 저장한다. Counter.jsimport React, { Component } from 'react'; class Counter extends Component { render() { return ( Value : {this.props.value} ); }} export default Counter; 전달받은.. 2019. 4. 24. 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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음