React에서 Spring Boot @Validation 연동하기

React와 Spring Boot를 함께 사용할 때, 백엔드에서 유효성 검사를 수행하는 @Validation을 적용하고,
이를 프론트엔드에서 활용하는 방법에 대해 알아보겠습니다.

1. Spring Boot에서 유효성 검사 설정

Spring Boot에서는 @Valid 또는 @Validated 어노테이션을 사용하여 DTO에서 유효성 검사를 수행할 수 있습니다.

DTO 클래스 예제

import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.Size;

public class UserRequest {
    @NotBlank(message = "이름을 입력해주세요.")
    @Size(min = 2, max = 20, message = "이름은 2자 이상 20자 이하로 입력해주세요.")
    private String name;

    @NotBlank(message = "이메일을 입력해주세요.")
    private String email;

    // Getters and Setters
}

Controller에서 유효성 검사 적용

import org.springframework.http.ResponseEntity;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import jakarta.validation.Valid;

@RestController
@RequestMapping("/api/users")
@Validated
public class UserController {

    @PostMapping("/create")
    public ResponseEntity<String> createUser(@Valid @RequestBody UserRequest userRequest) {
        return ResponseEntity.ok("유효한 요청입니다.");
    }
}

이렇게 하면 유효성 검사에 실패할 경우, Spring Boot에서 자동으로 400 Bad Request 응답을 반환합니다.

2. React에서 유효성 검사 적용

React에서는 프론트엔드에서 기본적인 유효성 검사를 수행하고, 이후 백엔드에서 최종 유효성 검사를 진행하는 것이 일반적입니다.

React (프론트엔드) 예제

import { useState } from "react";

const UserForm = () => {
    const [formData, setFormData] = useState({ name: "", email: "" });
    const [errors, setErrors] = useState({});

    const validate = () => {
        let newErrors = {};
        if (!formData.name) newErrors.name = "이름을 입력해주세요.";
        else if (formData.name.length < 2 || formData.name.length > 20)
            newErrors.name = "이름은 2자 이상 20자 이하로 입력해주세요.";

        if (!formData.email) newErrors.email = "이메일을 입력해주세요.";

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!validate()) return;

        try {
            const response = await fetch("/api/users/create", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(formData),
            });

            if (!response.ok) {
                const errorData = await response.json();
                setErrors({ server: errorData.message || "서버 오류 발생" });
                return;
            }

            alert("유효한 요청입니다.");
        } catch (error) {
            console.error("요청 실패:", error);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>이름:</label>
                <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                />
                {errors.name && <p style={{ color: "red" }}>{errors.name}</p>}
            </div>

            <div>
                <label>이메일:</label>
                <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                />
                {errors.email && <p style={{ color: "red" }}>{errors.email}</p>}
            </div>

            {errors.server && <p style={{ color: "red" }}>{errors.server}</p>}

            <button type="submit">제출</button>
        </form>
    );
};

export default UserForm;

3. 서버 유효성 검사 에러 처리

Spring Boot에서 유효성 검사에 실패할 경우, JSON 형식으로 에러 메시지를 반환하도록 설정할 수 있습니다.

Global Exception Handler 추가

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@ControllerAdvice
public class GlobalExceptionHandler {

    @ResponseStatus(HttpStatus.BAD_REQUEST)
    @ExceptionHandler(MethodArgumentNotValidException.class)
    public @ResponseBody Map<String, String> handleValidationExceptions(MethodArgumentNotValidException ex) {
        Map<String, String> errors = new HashMap<>();
        ex.getBindingResult().getFieldErrors().forEach(error ->
            errors.put(error.getField(), error.getDefaultMessage())
        );
        return errors;
    }
}

이렇게 하면 클라이언트는 JSON 응답으로 유효성 검사 오류 메시지를 받아 화면에 표시할 수 있습니다.

✅ 정리

1. React에서 프론트엔드 유효성 검사 수행하여 잘못된 데이터 전송을 방지
2. Spring Boot에서 @Valid를 이용해 최종 유효성 검사 수행
3. 백엔드에서 에러 발생 시 JSON 응답을 반환하여 프론트에서 적절한 메시지 처리

이 방식을 사용하면 프론트엔드와 백엔드에서 유효성 검사를 함께 적용하여 보안성을 높이고 사용자 경험을 개선할 수 있습니다. 🚀