React 활용 - 4 : axios 사용하여 Spring에 데이터 전송하기

이번에는 지난번에 입력받은 데이터를 spring으로 넘기는 작업을 하겠다. 우선 spring과 통신하기 위해 axios를 설치한다. npm install aixos 그 후 TextData.js에 aixos를 import 하고 Send() 함수 안에서 axios를 아래와 같이 선언한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function TextData() { const [data1, setData1] = useState(''); const [data2, setData2] = useState(''); const updateData1 = e => setData1(e.target.value); const ..

2022.10.06

React - 파일 데이터 전송하기(파일 업로드, 파일 미리보기)

리액트에서 파일 업로드를 하는 방법은 기존 ajax를 사용하는 방법과 크게 다르지 않다. 스테이트에 파일 데이터를 넣는 방법이 다른 부분이 있어서 해당 부분부터 처리를 해야한다. 먼저 아래와 같이 두개의 스테이트를 생성한다. const [imgBase64, setImgBase64] = useState([]); // 파일 base64 const [imgFile, setImgFile] = useState(null);//파일 imgFile은 이미지 파일 그 자체를 받을 스테이트이고, imgBase64는 미리보기를 구현하기 위해서 이미지 데이터를 받을 스테이트이다. 아래와 같이 input을 만들어준다. 위 input에 파일을 등록하면 handleChangeFile 함수가 실행한다. const handleChan..

2021.05.27

React - axios 사용하여 rest api (Spring) 과 소통하기

리액트를 사용하면 백엔드로 노드를 가장 많이 사용한다. 하지만 spring 을 이용하여 소통하는 방법을 알아보자. 먼저 axios 라이브러리를 설치해야한다. npm i axios --save axios 는 jquery의 ajax와 비슷한 역할을 해준다. 설치를 하였으면 지난 코드에 아래와 같이 작성한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; // 액시오스 function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); function te..

2021.05.03