[Django/React] 장고와 리액트 연동 (3)

[Django/React] 장고와 리액트 연동 (3)

React App 생성

yarn create react-app React-project

+) yarn 이 없다면 다음과 같이 설치한다.

npm -g install yarn

 

react 프로젝트 src 폴더 내에 RestAPI.js 파일을 생성해준다.

App.js 파일에 다음과 같이 추가한다.

import logo from './logo.svg';
import './App.css';
import RestAPI from "./RestAPI.js"
import React from "react";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <RestAPI />
      </header>
    </div>
  );
}

export default App;

 

Axios

Axios는 브라우저, Node.js를 위한 HTTP 비동기 통신 라이브러리다.

HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동으로 변경해주며, 브라우저 호환성이 뛰어나다.

 

React에는 HTTP Client 내장 클래스가 존재하지 않기 때문에

백엔드와 데이터를 주고 받기 위해서 Axios를 사용한다.

yarn add axios

 

RestAPI.js 코드

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

function RestAPI() {
    const [text, setText] = useState([]);

    return (
        <>
            <h1>REST API</h1>
            <div className="btn-primary">
                <button
                    onClick={() => {
                        axios
                            .post("http://127.0.0.1:8000/review/", {
                                title: "제목",
                                content: "내용",
                            })
                            .then(function (response) {
                                console.log(response);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }}
                >
                    POST
                </button>
                <button
                    onClick={() => {
                        axios
                            .get("http://127.0.0.1:8000/review/")
                            .then((response) => {
                                setText([...response.data]);
                                console.log(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }}
                >
                    GET
                </button>
            </div>
            {text.map((e) => (
                <div>
                    {" "}
                    <div className="list">
                        <span>
                            {e.id}번, {e.title}, {e.content}, {e.updated}
                        </span>
                        <button
                            className="btn-delete"
                            onClick={() => {
                            axios.delete(`http://127.0.0.1:8000/review/${e.id}/`);
                            setText(text.filter((text) => text.id !== e.id));
                        }}
                    >
                        DELETE
                        </button>{" "}
                    </div>
                </div>
            ))}
        </>
    );
}

export default RestAPI;

 

CORS

아무런 설정을 하지 않고 장고와 리액트를 실행했을 때, CORS 오류가 발생한다. 

도메인 이름이 서로 다른 사이트끼리 API 공유를 설정하지 않았다면 CORS 오류가 발생한다. 

 

장고에서 django-cors-headers를 설치한다.

pip install django-cors-headers

settings.py에서 다음과 같이 수정/추가 해준다.

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
	...,
    'corsheaders',
]

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

CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:3000', 'http://localhost:3000')
CORS_ALLOW_CREDENTIALS = True

 

설정을 해준 후 React 앱을 확인하면 다음과 같이 POST, GET 버튼을 확인할 수 있다. 

POST를 클릭 후 GET을 확인하면 아래와 같이 테이블이 업데이트 된 것을 확인 할 수 있고,

백엔드 서버에서도 확인이 가능하다

이렇게 해서 장고와 리액트 연동은 끝 😆

 

참고

https://breathtaking-life.tistory.com/137