8-1 react 프로젝트(react eclipse 연동)

react와 spring boot 연동 깃은 따로

react만 사용했을 경우 input을 활용한 insert

-import React, { Component } from "react";
-//import Clock from "react-live-clock"
-import axios from "axios";
-
-class Add extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-    this.handleChange = this.handleChange.bind(this);
-    this.Send = this.Send.bind(this);
-  }
-
-  handleChange = e => {
-    this.setState({
-      [e.target.name]: e.target.value
-    });
-  };
-  handleSubmit = e => {
-    e.preventDefault();
-  };
-
-  Send = async () => {
-    await axios
-      .post("http://localhost:8076/workattitude/new", this.state)
-      .then(response => {
-        console.log(response);
-      })
-      .catch(response => {
-        console.log(response);
-      });
-  };
-
-  render() {
-    return (
-      <div classname="container-fluid">
-        <form onSubmit={this.handleChange}>
-          신청 시간 및 날짜 :{" "}
-          {
-            // <Clock
-            //   format={"YYYY 년 MM 월 DD 일 HH:mm:ss"}
-            //   ticking={true}
-            //   timezone={"KR/Pacific"}
-            // />
-          }
-          <br />
-          이름 :{" "}
-          <input
-            placeholder="홍길동"
-            type="text"
-            value={this.state.name}
-            onChange={this.handleChange}
-            name="name"
-          />
-          <br />
-          시작 날짜 :{" "}
-          <input
-            type="date"
-            value={this.state.startDay}
-            onChange={this.handleChange}
-            name="startDay"
-          />
-          끝 날짜 :{" "}
-          <input
-            type="date"
-            value={this.state.endDay}
-            onChange={this.handleChange}
-            name="endDay"
-          />
-          <br />
-          제목 :{" "}
-          <input
-            type="text"
-            value={this.state.title}
-            onChange={this.handleChange}
-            name="title"
-          />
-          <br />
-          근태구분 :{" "}
-          <select
-            name="state"
-            type="text"
-            value={this.state.state}
-            onChange={this.handleChange}
-          >
-            <option value="출장">출장</option>
-            <option value="외근">외근</option>
-            <option value="연차">연차</option>
-            <option value="반차">반차</option>
-            <option value="교육">교육</option>
-          </select>
-          <br />
-          근태 사유 :{" "}
-          <input
-            placeholder=""
-            type="text"
-            value={this.state.content}
-            onChange={this.handleChange}
-            name="content"
-          />
-          <br />
-          <br />
-          <input type="submit" onclick={this.Send()} value="근태 신청" />
-          <div />
-        </form>
-      </div>
-    );
-  }
-}
-
-export default Add;

통신은 axios로 한다. 

handlechange에서 render해온 값들을 넣어주고, handlesubmit에서 실시간으로 업데이트해준다. (넣을때 마다 값이 갱신됨) 

Send에서는 axios 통신으로 해당 url의 api와 통신.

-보충 바인드 해주는 이유