React와 Python 연결

React와 Python 연결

React로 작성한 프론트엔드와 FastAPI로 구성한 백엔드를 연결하여 데이터를 주고받는 구조는 실제 서비스 개발에서 가장 기본적이면서도 중요한 흐름입니다.
이번 글에서는 React에서 입력한 데이터를 FastAPI로 전송하는 과정을 실습하고, 중간에 발생했던 CORS 에러 문제와 해결 방법까지 정리합니다.

프론트엔드: React 입력 폼 작성

사용자가 이벤트 정보를 입력하면 해당 데이터를 FastAPI 서버로 전송하도록, 다음과 같은 컴포넌트를 작성했습니다.

// src/event/Regist.jsx
import { useState } from "react";
import axios from "axios";

function Regist() {
  const [form, setForm] = useState({
    id: "",
    title: "",
    image: "",
    description: "",
    tags: "",
    location: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { id, title, image, description, tags, location } = form;

    axios
      .post("http://localhost:8000/events/", {
        id,
        title,
        image,
        description,
        tags,
        location,
      })
      .then((res) => console.log("등록 완료:", res))
      .catch((err) => console.error("에러 발생:", err));
  };

  return (
    <>
      <h1>이벤트 등록</h1>
      <form onSubmit={handleSubmit}>
        <input name="id" value={form.id} onChange={handleChange} placeholder="이벤트 ID" type="number" /><br />
        <input name="title" value={form.title} onChange={handleChange} placeholder="제목" /><br />
        <input name="image" value={form.image} onChange={handleChange} placeholder="이미지 URL" /><br />
        <input name="description" value={form.description} onChange={handleChange} placeholder="설명" /><br />
        <input name="tags" value={form.tags} onChange={handleChange} placeholder="태그 (쉼표로 구분)" /><br />
        <input name="location" value={form.location} onChange={handleChange} placeholder="장소" /><br />
        <button type="submit">등록</button>
      </form>
    </>
  );
}

export default Regist;

백엔드: FastAPI 이벤트 등록 API

FastAPI에서는 위에서 보낸 데이터를 받아 처리하기 위한 POST API를 작성합니다.

# routes/events.py
@event_router.post("/", status_code=status.HTTP_201_CREATED)
async def create_event(data: Event, session: Session = Depends(get_session)):
    session.add(data)
    session.commit()
    session.refresh(data)
    return {"message": "이벤트 등록이 완료되었습니다."}

CORS 에러 발생

React에서 FastAPI로 데이터를 전송하려고 하자 다음과 같은 오류가 발생했습니다.

OPTIONS /events/ 405 Method Not Allowed

이 오류는 브라우저가 보내는 프리플라이트 OPTIONS 요청에 대해 서버가 응답하지 못할 때 발생합니다. 즉, CORS(Cross-Origin Resource Sharing) 설정이 되어 있지 않기 때문입니다.

CORS 문제 해결 방법

FastAPI에 CORS 미들웨어를 추가하여 React 개발 서버에서 오는 요청을 허용합니다.

# main.py
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # React 개발 서버 주소
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

위 설정을 통해 React가 보내는 모든 메서드(GET, POST, OPTIONS 등)와 헤더를 허용할 수 있습니다.

결과 확인

CORS 설정을 적용한 후, React의 "등록" 버튼을 클릭하면 FastAPI 콘솔에 POST 요청이 들어오고, 응답으로 {"message": "이벤트 등록이 완료되었습니다."}가 정상적으로 반환됩니다.