[TIL] 내일배움캠프 105일차_[DRF&React] DRF와 React 연결하기

March 11, 2025

TIL

👀Today I Learn

DRF API 개발 및 실행 확인

먼저, Django에서 DRF를 사용하여 API를 개발하고 실행
```
  python manage.py runserver
```
API가 http://127.0.0.1:8000/api/와 같은 URL에서 정상적으로 동작하는지 확인
- Postman 또는 브라우저에서 API 엔드포인트를 테스트

React 프로젝트 생성 및 실행

React 프로젝트 생성

  npx create-react-app my-react-app
  cd my-react-app
  npm start

http://localhost:3000에서 React 개발 서버가 실행

React에서 API 호출하기

API 연동을 위해 axios 라이브러리를 사용하는 것이 일반적

Axios 설치

npm install axios

API 호출 로직 추가하기

React에서 DRF API를 호출하려면 useEffect와 axios를 활용

예제

src/components/FetchData.js

  import React, { useState, useEffect } from "react";
  import axios from "axios";

  const FetchData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
      axios.get("http://127.0.0.1:8000/api/")
      .then(response => {
          setData(response.data); // API 응답 데이터를 상태에 저장
      })
      .catch(error => {
          console.error("데이터 가져오기 실패:", error);
      });
  }, []);

  return (
      <div>
      <h2>API 데이터</h2>
      <ul>
          {data.map((item, index) => (
          <li key={index}>{item.name}</li> // API 응답에 맞게 수정
          ))}
      </ul>
      </div>
  );
  };

  export default FetchData;

위 코드를 실행하면 API 데이터를 가져와서 React UI에 표시할 수 있음

CORS 설정 (필요한 경우)

Django 서버에서 React 프론트엔드의 요청을 허용해야 함

Django CORS 설정

pip install django-cors-headers

settings.py에서 INSTALLED_APPS에 추가:

  INSTALLED_APPS = [
      ...
      'corsheaders',
  ]

  MIDDLEWARE = [
      ...
      'corsheaders.middleware.CorsMiddleware',
  ]

  CORS_ALLOW_ALL_ORIGINS = True  # 모든 도메인 허용 (개발용)

이제 React에서 Django API를 호출 가능

React에서 API 연결 후 UI에 적용

FetchData.js를 App.js에서 불러오면 됨

  import React from "react";
  import FetchData from "./components/FetchData";

  function App() {
  return (
      <div className="App">
      <h1>React + DRF 연결</h1>
      <FetchData />
      </div>
  );
  }

  export default App;

이제 npm start를 실행하면, Django API에서 데이터를 가져와서 React UI에서 볼 수 있음

API 요청 시 JWT 인증

백엔드가 인증이 필요한 API를 제공한다면 JWT 토큰을 활용해야 함

로그인 후 토큰 저장

axios.post("http://127.0.0.1:8000/api/token/", {
    username: "testuser",
    password: "password123"
}).then(response => {
    localStorage.setItem("token", response.data.access);
});

API 요청 시 토큰 포함

axios.get("http://127.0.0.1:8000/api/protected/", {
    headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
}).then(response => {
    console.log(response.data);
});

이제 DRF와 React가 완벽하게 연결되었음
추가로 배포 시에는 CORS 설정을 강화하고, API 요청을 환경 변수로 분리하면 더 좋음

💡Today I Thought

오늘의 체크리스트

회고

오늘 하루도 야무지게 마무리~ 푸터를 넣을까하다가 지금 단계에서는 필요없을 거 같아서 일단 API 연결로 바로 넘어갔다. 다행이 회원가입이 잘 연동이 되어서 편안… 내일은 로그인도 완료하고.. 챗봇도 끝내는 걸 목표로 해야겠다.. 그래야 발표자료 만들어…🫠

Lee Hyun Ji