[React + Spring] 데이터 전송 - axios post

개요

프론트에서 데이터를 입력받고 백으로 전송한다.

 

 

개발환경

• STS 4.17.2
• React 18.2.0
• Springboot 2.7.8
• Java 8
• Maven 4
• Mysql 8.0.32
• mybatis 1.3.2

---

 

1. Front

 

데이터를 건내줄 회원가입 폼을 구현한다.

 

 

 📜 전체코드 - Signup.js

이름, 이메일, 비밀번호를 입력받고, 비밀번호 확인까지 하면 회원가입 버튼을 누를 수 있게 해주었다.

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./Routes.css";
import axios from "axios";

function SignUp() {
  // 이름, 아이디, 비밀번호
  const [inputUserName, setUserName] = useState("");
  const [inputUserId, setUserId] = useState("");
  const [inputUserPw, setUserPw] = useState("");
  const [inputUserPwCheck, setUserPwCheck] = useState("");

  // 메시지 저장
  const [passwordConfirmMessage, setPasswordConfirmMessage] = useState("");

  // 유효성 검사 (일단 비밀번호만)
  const [isPasswordConfirm, setIsPasswordConfirm] = useState(false);

  // 값 추적
  const handleInputUserId = (e) => {
    setUserId(e.target.value);
  };
  const handleInputUserName = (e) => {
    setUserName(e.target.value);
  };
  const handleInputUserPw = (e) => {
    setUserPw(e.target.value);
  };

  // 비밀번호 검사
  const handleInputUserPwCheck = (e) => {
    setUserPwCheck(e.target.value);
    if (inputUserPw === e.target.value) {
      setPasswordConfirmMessage("비밀번호 일치");
      setIsPasswordConfirm(true);
    } else {
      setPasswordConfirmMessage("비밀번호 불일치");
      setIsPasswordConfirm(false);
    }
  };

  // 회원가입 수행 -> 백으로 전송
  const onClickSignUp = () => {
    console.log("회원가입 수행");
    console.log("이름 : ", inputUserName);
    console.log("아이디 : ", inputUserId);
    console.log("비밀번호 : ", inputUserPw);

    // axios - http 통신 라이브러리
    axios
      .post("/api/signup", {
        username: inputUserName,
        id: inputUserId,
        passwd: inputUserPw,
      })
      .then((res) => {
        alert("회원가입 완료");
        goToLogin();
      })
      .catch();
  };

  // useNavigate 사용하여 회원가입 완료 시 로그인 화면으로 보내줌
  const navigate = useNavigate();
  const goToLogin = () => {
    navigate("/login");
  };

  return (
    <div className="Main">
      <header className="Header">
        <form>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div>회원가입</div>

            <div className="formbox">
              <label>Name </label>
              <input
                type="name"
                value={inputUserName}
                onChange={handleInputUserName}
              ></input>
            </div>

            <div className="formbox">
              <label>Email (ID) </label>
              <input
                type="email"
                value={inputUserId}
                onChange={handleInputUserId}
              ></input>
            </div>
            <div className="formbox">
              <label>비밀번호 </label>
              <input
                type="password"
                value={inputUserPw}
                onChange={handleInputUserPw}
                title="비밀번호"
              ></input>
            </div>

            <div className="formbox">
              <label>비밀번호 확인 </label>
              <input
                type="password"
                value={inputUserPwCheck}
                onChange={handleInputUserPwCheck}
              ></input>
              <span
                className={`message ${isPasswordConfirm ? "success" : "error"}`}
              >
                {passwordConfirmMessage}
              </span>
            </div>
          </div>

          <div>
            <button
              type="submit"
              className=""
              onClick={onClickSignUp}
              disabled={!isPasswordConfirm}
            >
              회원가입
            </button>
          </div>
        </form>
      </header>
    </div>
  );
}

export default SignUp;

 

이름, 이메일에도 유효성 검사를 해주는게 맞지만, 일단은 비밀번호 확인만 먼저 해주었다.

비밀번호 확인 아래의 span태그에서 삼항연산자를 사용하여 isPasswordConfirm값에 따른 결과를 보여줬다.

isPasswordConfirm이 true라면 회원가입 버튼을 누를수 있고 누르면 axios를통해 백엔드로 전송시킨다.

전송시키는 데이터의 형식은 Json이다.

 

---

2. Back

 

 

📜 UserController.java

package com.hjh.todolist.api.member;

import java.util.Map;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
	
	@PostMapping("/api/signup")
	public void signupForm(@RequestBody Map<String, Object> map) {
		
		// 폼 전송값 확인
		System.out.println(map);
		
		// map 자료찾기
		System.out.println(map.get("username"));
		
	}

}

 

Post 전송해준 객체를 받기 위해 RequestBody 어노테이션을 사용하여, 데이터를 자바 객체로 전달받는다.

전달받은 JSON 데이터는 MessageConverter를 통해 자바 객체로 변환된다.

 

---

📌 CORS 오류처리

 

포트번호가 다를 때 CORS에러가 발생한다.

React에서 발생한 오류의 경우, 간단한 방법으로 해결할 수 있다.

 

 📜  package.json

{

  "proxy": "http://localhost:8080"
  
}

 

접속하려고 하는  스프링부트의 포트를 proxy 설정에 기입해준다.

 

이 방법이 통하지 않을 경우 다음의 포스트를 참고하는게 좋을 듯 하다.

 

 

[React] (Proxy) 리액트와 노드 다른 포트 통신 설정

 

---

CORS 개념 참고

 

CORS(Cross Origin Resource Sharing)

---

 

 💻  결과 

 

데이터 전송 - Front

 

 

데이터 받기 - Back

 

 

 

무사히 백으로 전송된다.