[React] 장고와 연동하기 (axios 이용하여 API 호출)

ArtROUND 프로젝트에서 프론트를 맡았다. ArtROUND는 장고와 리액트를 이용해서 개발을 하고 있다. 

리액트에서 장고와 연동하는 건 생각보다 간단했다. 이 글에서 그 방법을 보여줄 것이다! ㅋㅋ

 

---

 

1. Axios란

Axios는 브라우저, Node.js를 위해 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 

(참고로 API 호출에는 axios 외에도 ajax, fetch 등이 있는데,

ajax는 promise 기반이 아니고, JQuery를 사용하지 않을 경우 쉽게 구현하기가 어렵다는 점,

fetch는 기능이 상대적으로 부족하고, 브라우저 호환성이 떨어지는 단점이 있다고 한다.

따라서 우린 axios를 사용해보았다. )

 

2. Axios 설치

먼저 axios를 사용하려면 라이브러리를 설치해야 한다.

npm install axios
yarn add axios

npm 또는 yarn을 이용해서 설치해주기

(cf: yarn이 npm보다 보안, 속도 면에서 더 좋다고 한다. yarn을 추천!)

 

3. Axios 사용하기

ArtROUND에서 공지사항 페이지를 만든 것으로 예를 들 것이다. 

우선 useState와 axios 불러주기!

import React, { useState } from 'react';
import axios from 'axios';

 

POST

1. GET 메소드에서 불러올 객체를 담을 useState 생성해준다. 

 const [text, setText] = useState([]);

 

2. axios.post를 이용하여 서버에 title과 content를 업로드해준다. 

function textInput() {
    var getTitle = document.getElementById("title").value;
    var getContent = document.getElementById("content").value;
    axios.post("http://127.0.0.1:8000/main/notice/", {
      title: getTitle,
      content: getContent,
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    <Link to="/notice"></Link>
}

(나는 "등록하기" 버튼을 누르면 textInput 함수를 호출하게 만들었음) 

<Link to="/notice"> <button type="button" className="post" onClick={textInput}>
  등록하기
</button> </Link>

 

GET 

그리고 axios.get을 이용해 데이터를 불러올 것이다. 

  function getNotice() {
    axios.get("http://127.0.0.1:8000/main/notice/")
      .then((response) => {
        setText([...response.data]);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

그리고 불러온 데이터를 화면에 띄운다. 

{text.map((e) => (
  <div>
    {e.updated_at}, {e.title}, {e.content}
  </div>
))}

 

DELETE 

axios.delete로 DB에 있는 데이터를 삭제하는 기능도 추가한다. 

{text.map((e) => (
  <div>
    {e.title} {e.content}
    <button
     className="btnDelete"
     onClick={() => {
       axios.delete(`http://127.0.0.1:8000/main/notice/${e.id}`);
       setText(text.filter((text) => text.id !== e.id));
     }}
   >
   삭제
    </button>
  </div>
))}

DB에서도 지우고 setText를 이용해 화면에서도 지워주기! 

 

4. 서버 실행하기 

코드 작성은 끝났다. 이제 리액트와 장고 서버를 실행시켜 위에서 작성한 코드가 잘 실행되는지 확인해볼 것이다. 

- 장고 서버 실행 

python manage.py runserver

- 리액트 서버 실행 

npm start
/또는/
yarn start

각각 서버를 실행시킨 후,  

localhost:8000/review/ 로 drf를 열고, localhost:3000/ 로 리액트를 창을 연다. 

실행시키면

Access to XMLHttpRequest at 'http://127.0.0.1:8000/notice/' from origin 'http://localhost:3000/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

라는 오류가 뜰 것이다. 이는 도메인 이름이 서로 다른 사이트끼리 API를 요청하여 CORS 오류가 발생한 것이다. (장고는 8000, 리액트는 3000이기 때문에 발생) 

 

CORS 오류 해결

1. 장고에서 django-cors-headers 설치

pip install django-cors-headers

2. 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

---

 

여기까지 왔다면 정말 끝! 이제 잘 동작하는지 확인만 하면 된다. 

공지사항 작성 화면에서 제목과 내용을 입력하고 등록 버튼을 눌러준다. 

그리고 공지사항 게시판 화면에서 확인해보면 

짜잔~~! 글과 내용이 잘 넘어온 것을 확인할 수 있다. 

장고 서버도 확인해보면 데이터가 잘 들어와 있다. 

 

삭제 버튼도 잘 동작하는 것을 볼 수 있다! 

 

---

 

나의 떨리는 첫 포스팅 끝 ^_^ 쓰다 보니 생각보다 힘드네...

약간 내 기록용 블로그라... 가독성이 안 좋을 수도 ㅋㅋㅋ ㅜㅜ 글 쓰는 연습도 좀 해야겠다...~ 

 

* 초보 개발자입니다 T^T  틀린 점, 이상한 점 있다면 언제든지 댓글로 지적 부탁드립니다...! 

* 이 포스팅은 [프론트엔드 지식백과]를 참고하여 공부한 것을 기록했습니다.

  혹시 장고 부분이 더 알고 싶으시면 아래 블로그 참고 ㅎㅎ

[장고/리액트] 리액트와 장고(DRF) 연동하기- (1) 장고 세팅