728x90 분류 전체보기252 7-2 카운터 예제(redux) Redux를 사용하기에, store를 사용하게된다. dispatch가 호출되고 state가 업데이트되고, subscribe가 호출되면, 데이터 변동이 있을때마다 리랜더링이 되도록 설정 - dispatch = store 업데이트- subscribe = 데이터 변환됫것 적용 먼저 npm install --save reduxredux모듈을 설치하고 진행 src/actions/index.jsexport const INCREMENT = 'INCREMENT';//action의 type을 정의하여 exportexport const DECREMENT = 'DECREMENT';export const SET_DIFF = 'SET_DIFF'; export function increment() {//함수들을 정의 return.. 2019. 4. 24. 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. 이전 1 ··· 15 16 17 18 19 20 21 ··· 63 다음