본문 바로가기
728x90

풀스택/React16

8-1 react 프로젝트(react eclipse 연동) react와 spring boot 연동 깃은 따로 react만 사용했을 경우 input을 활용한 insert 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111-import React, { Component } from "react";-//import Clock from "react-live-clock"-import axios from "axios";--cl.. 2019. 5. 9.
리액트 오류 하나씩 추가하기 Module not found: Can't resolve './node_modules/react' 일때는 오류나는 해당 js의 import를import React, {Component} from 'react';로 바꿔주면된다. 2019. 5. 3.
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.