[React / Spring] 리액트에서 스프링으로 데이터 전송

아래 링크의 회원가입 데이터 전달 기준으로 설명

Vo, DAO, Service는 다 작성되었다고 가정

[회원가입]

React

1. 아래 명령어 입력해 설치

npm install axios --save
npm install http-proxy-middleware --save

2. import axios from 'axios' 추가

3. 값 넘길 위치에 아래 코드 추가

axios.post("/signUp", {
			userId: this.state.studentId,
			userName: this.state.studentName,
			password: this.state.password
			})
			// then -> post 후 과정
			.then(function(response){ // response -> 스프링에서 받아온 데이터
				console.log(response.date); //-> 데이터를 사용하기 위해선 뒤에 .data 붙여야함
			})
			.catch(function (error){
				alert("회원가입 실패");
			});

*** 주의!! ***

### The error may exist in file [C:\Users...]
### The error may involve defaultParameterMap
### The error occurred while setting parameters

위와 같은 에러가 발생하고 넘어온 데이터 값이 다 null인 경우가 있다.
이 때 VO에 쓰여진 변수들 이름과 위의 코드에서 넘기는 데이터의 이름이 같아야한다.

Null 에러 확인하기

/src/main/resource/mybatis-config.xml 파일의 <Configuration> 태그 내부에 아래 코드 작성

	<settings>
		<setting name="jdbcTypeForNull" value="NULL"/>
	</settings>

 

Controller In Spring

package kr.co.controller;

import javax.inject.Inject;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import kr.co.service.signUpService;
import kr.co.vo.signUpVO;

@Controller
@RequestMapping("")
public class signUpController {
	
	private static final Logger Logger = LoggerFactory.getLogger(signUpController.class);
	
	@Inject
	signUpService service;
	
	// 회원가입 데이터 post
	@CrossOrigin
	@RequestMapping(value="/signUp", method = RequestMethod.POST)
	public void postRegister(@RequestBody signUpVO vo) throws Exception{
		Logger.info("post register");
		
		System.out.println("id : " + vo.getUserId());
		System.out.println("pw : " + vo.getPassword());
		System.out.println("name : " + vo.getName());
		
		service.register(vo);
	}
}

 

확인

1. 회원가입 창에서 데이터 입력 후 회원가입 버튼 클릭

2. Spring console 창에서 데이터 전달 제대로 됐는지 확인

 

참고자료

• https://cookinghoil.tistory.com/106