[Spring + React] react input 데이터 springboot Controller 로 전달하기

React

src/pages/SalesRegistrationPage.js

TextField 에 input으로 입력받을 numberOfToken 을 useState

TextField input 에 입력 후 버튼 클릭 시 이벤트 함수 handleClickRegister (axios로 전달)

  

    
    
    
    
  
  const [numberOfToken, setNumberOfToken] = useState();
  const handleClickRegister = (event, id) => {
    alert("save");
    axios
      .get("/product/insert", {
        params: { numberOfToken: numberOfToken },
      })
      .catch(function () {
        console.log("실패");
      });
    console.log("after", product);
  };

 

src/pages/SalesRegistrationPage.js > return()

TextField

  

    
    
    
    
  
              <TextField
                id="outlined-number"
                label="Number"
                type="number"
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">조각</InputAdornment>
                  ),
                }}
                onChange={(e) => {
                  setNumberOfToken(e.target.value);
                }}
              />

 

 

SpringBoot

 

back-sto-sale-purchase/src/main/java/com/sto/salepurchase/backstosalepurchase/ProductAPIController.java

  

    
    
    
    
  
	@GetMapping("/product/insert")
	public List<Integer> numOfTokenInsert(@RequestParam Integer numberOfToken) {
		System.out.println("numOfToken : " + numberOfToken);
//		System.out.println(numberOfToken.getClass().getName());
		return Arrays.asList(numberOfToken);
	}

 

@RequestParam

외부에서 파라미터 받음

변수이름과 파라미터 이름이 같아야 함

@RequestParam option 중 required option의 default 값이 true 이다. 기본으로 값을 넘겨야 함.

localhost:8080/product/insert/numberOfToken=33 과 같은 형식으로 확인

파라미터를 제외하고 localhost:8080/product/insert 와 같이 요청하면 400 error

 

참고 :

2022.09.02 - [Java/Spring] - [Spring] inflearn 스프링 입문 - 스프링 웹 개발 기초 2

 

 

실행 결과

TextField 에 input값으로 99 입력 후 판매등록 버튼 클릭, 버튼 클릭 시 handleClickRegister 함수 실행

springboot에서 출력결과 확인

 

 

참고 : 

https://mui.com/material-ui/react-text-field/

https://devofroad.tistory.com/99?category=974758

https://mangkyu.tistory.com/72

https://ocblog.tistory.com/49

https://www.baeldung.com/spring-request-param

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annotation/RequestParam.html\

https://spring.io/guides/gs/serving-web-content/