post 방식으로 데이터 전송하기

• 리액트 에서 spring으로 비동기 (axios) 방식으로 전송 한다.

get? post? 어노테이션 차이

• get : @RequestParam
• post : @RequestBody

---

spring

ReactSpringController.java

• 하나의 데이터 처리하는 경우

@RestController // JSON, XML 등과 같은 데이터 반환 목적
@CrossOrigin(origins = "*") // 서버 XMLHttpRequest 해결용
@RequestMapping("/react")
public class ReactSpringController {

    // http://localhost:8081/react/login

    @PostMapping("loginpost")
    public String loginpost(@RequestBody String id, String pw){
        System.out.println("id : " + id);
        System.out.println("pw : " + pw);
        return "Test";
    }
    
    // 또는 HashMap <String, Object> 이용
    
    
    @PostMapping("loginpost")
    // @RequestBody -> 클라이언트(React)에서 보낸 body에 data를 꺼내겠습니다.
    public String loginpost(@RequestBody HashMap<String, Object> data){
        // HashMap<String, Object> -> key, value
        Map<String, Object> map = data;

        System.out.println("id : " + map.get("id"));
        System.out.println("pw : " + map.get("pw"));
        return "Test";
    }
    
    
    // 배열형식의 데이터의 경우
    
 }

• 다수 list 형태의 데이터를 처리하는 경우

• 리액트

  • let url의 변수로 rest api 반응할 주소 작성하기
    (spring 컨트롤러에서 mapping으로 받아들임)

import React, { useRef } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const nav = useNavigate();
  const id = useRef();
  const pw = useRef();

  function tryLogin() {
    // 사용자가 적은 ID, PW 값을 가져와서
    // SpringBoot 서버로 전송하겠습니다 ! --> 비동기 통신방식 (axios)
    let inputId = id.current.value;
    let inputPw = pw.current.value;
    let url = "http://localhost:8081/myweb/react/loginpost";

    // post 방식 통신에 있어서 요청 데이터는 body 영역에 담긴다.
    axios
      .post(url, {
        id: inputId,
        pw: inputPw,
      })
      .then((res) => console.log(res));
      }

• spring entity 폴더에 WebToon 이름의 클래스 생성

package org.example.entity;

import lombok.AllArgsConstructor;
import lombok.Data;

@AllArgsConstructor
@Data
public class WebToon {
    String openDay;
    String name;

}