[React] Django와 연동하기: 값 주고 받기

React는 클라이언트를 만드는 프레임워크입니다. 따라서 웹서버를 따로 만들어서 이 서버와 클라이언트를 연동해야 합니다. 지난번 게시글에서는 자바스크립트 기반의 Node.js와 연동했지만 Python 기반의 Django와 연동할수도 있습니다.

일반적으로 Django와 React간에 값을 주고받을때 Django-Rest-Framework를 사용하여 API를 호출하지만 이 게시글에서는 조금 더 간단하고 기초적인 방법을 사용하였습니다.

---

Django

• Python 기반 웹 프레임워크입니다.
• 클라이언트, 서버를 모두 만들 수 있습니다.
• Python 기반의 다양한 라이브러리를 사용할 수 있습니다.

Django 프로젝트 및 앱 생성

1.  Django를 설치합니다.
2. 터미널에서 "django-admin startproject 프로젝트이름"을 실행합니다. "프로젝트이름"에 해당하는 폴더가 생성됩니다.
3. "프로젝트이름" 폴더 내부로 이동합니다.
4. 터미널에서 "python manage.py startapp 앱이름"을 실행합니다. "앱이름"에 해당하는 폴더가 생성됩니다.
5. 터미널에서 "python manage.py runserver"를 실행합니다.
   인터넷 브라우저로 http://127.0.0.1:8000에 접속하여 Django 템플릿이 실행되는 모습을 확인합니다.

Django - setting.py CORS 설정

이전 게시글의 Node.js와 마찬가지로, Django에서도 CORS 오류를 해결해야 합니다.

1. 터미널에서 다음을 실행하여 django-cors-headers를 설치합니다.

pip install django-cors-headers

2. 프로젝트 폴더의 settings.py를 다음과 같이 수정합니다. 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware'는 MIDDLEWARE 내부에서 가장 상위에 위치해야 합니다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    ########
    'tempApp',  # APP 이름
    'corsheaders'  # CORS 추가
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # CORS 추가
    'django.middleware.common.CommonMiddleware',  # CORS 추가
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS 추가
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8000', 'http://localhost:3000')
CORS_ALLOW_CREDENTIALS = True

Django 앱 만들기

React가 Django에 axios로 요청하면 Django가 React에 응답하는 앱입니다.

 

1. 프로젝트이름/ urls.py 를 수정합니다.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tempApp.urls')),
]

 

http://127.0.0.1:8000/ 으로 요청받으면 프로젝트 폴더 내의 "앱이름/ urls.py"를 실행합니다.

 

2. 프로젝트이름/ 앱이름/ urls.py 를 추가합니다.

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.main),
]

앱의 url을 다양하게 추가할 수 있습니다. path의 첫번째 argument는 http://127.0.0.1:8000/           부분에 해당합니다. 이 부분에 아무것도 입력이 되지 않을 경우에는 views.py의 main이 실행됩니다.

 

3. 프로젝트이름/ 앱이름/ views.py 를 수정합니다.

from django.shortcuts import render
from django.http import HttpResponse


def main(request):
    message = request.GET.get('abc')
    print(message)

    return HttpResponse("안녕?")

Django가 http://127.0.0.1:8000으로 GET 요청을 받았을 때, 그 GET 요청과 함께 전달된 값을 가져올 수 있습니다. dictionary 구조로 받는다고 가정했을 때, 키 'abc'에 대응하는 값을 message에 저장합니다. 터미널에서 message를 확인할 수 있습니다.

요청한 클라이언트에 HttpResponse로 응답을 보낼 수 있습니다.

---

React 프로젝트 - App.js 수정

import "./App.css";
import React, { useState } from "react";
import axios from "axios";

function App() {
  const [text, setText] = useState("없음");
  
  const clicked = () => {
    axios
      .get("http://127.0.0.1:8000", {
        params: {
          abc: "가나다",
        },
      })
      .then((response) => setText(JSON.stringify(response.data)));
  };

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={clicked}>클릭</button>
    </div>
  );
}

export default App;

실행한 모습은 다음과 같습니다.

버튼을 클릭하면 http://127.0.0.1:8000에 GET 요청을 합니다. 이 때 자바스크립트 기반의 내장된 fetch를 사용할 수도 있지만 여기서는 axios를 사용했습니다. 요즘은 axios가 fetch보다 더 자주쓰이는 추세입니다.

 

Axios

• HTTP 통신, 비동기 라이브러리입니다.
• 요청에 대한 응답을 JSON 형태로 변경해줍니다.
• Fetch보다 코드가 단순합니다.

axios.get()의 두번째 argument로 값을 전달할 수 있습니다. params : { 키: 값 } 의 형식입니다.

요청에 대한 응답을 받으면 .then()으로 응답을 처리할 수 있습니다. 여기서는 response라는 매개변수로 응답을 지칭하여 JSON 형식의 response로부터 값을 꺼냅니다.