[Django] DRF : REST API를 통해 장고와 리액트 연결하기

장고와 리액트를 연결하는 여러 방법 중 DRF(Django REST Framework)를 활용하는 방법이 있다.

REST API 를 통하면 데이터의 CRUD(Create, Read, Update, Delete)를 쉽게 처리할 수 있는데,

이번 포스트에서는 특히 데이터의 Create, 리액트에서 작성한 글을 장고 모델에 등록하는 과정을 다뤄보려고 한다.

(리액트와 장고의 설치는 생략하도록 하겠다.)

 

장고 REST API 를 구축하는 과정은 이전 포스트에서 다루었다.

장고 모델을 json 객체로 추출하기 (DRF)

 

 

 

(1) 장고 : POST/GET/PUT/DELETE 함수 작성

데이터의 Create는 POST, Read는 GET, Update는 PUT, Delete는 DELETE 메소드를 통해 이뤄진다.

장고의 REST API 에서 CRUD를 쉽게 처리할 수 있는 이유는 장고의 내장 라이브러리 덕분이다.

그 중 '클래스 베이스 뷰'인 APIView를 활용해(상속받아) 이 기능들을 구현할 예정이다.

CRUD 모든 기능을 구현해야 하기 때문에 클래스 내장 함수를 쉽게 사용하기 위해서

클래스 기반인 APIView를 이용하기로 하였다.

...
from .serializers import *
from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response
...

class ReviewView(APIView):
	def post(self, request):
    	review_ser = ReviewSerializer(data=request.data)
        if review_ser.is_valid():
            review_ser.save()
            return Response(review_ser.data, status=status.HTTP_201_CREATED)
        else:
            return Response(review_ser.errors, status=status.HTTP_400_BAD_REQUEST)
            
    def get(self, request):
        return Response('message', status=200)
        
    def put(self, request):
        return Response('message', status=200)
        
    def delete(self, request):
        return Response('message', status=200)

네 함수 중 post 함수를 먼저 작성해보았다.

앞선 REST API 생성 때 직렬화를 위한 Serializer를 생성했기 때문에

받아온 데이터의 유효성을 간편하게 검사하고 모델에 저장할 수 있다.

그 후엔 DRF의 Response 라이브러리를 활용해 현재 상태를 반환한다.

 

 

 

(2) 리액트

프론트엔드인 리액트에 이미 구현되어 있는 글쓰기 화면이다.

글쓰기 페이지

글쓰기 기능이 사용자 정보를 필요로 하기 때문에

프로젝트는 내용 상 로그인이 완료된 후 글쓰기 페이지로 진입할 수 있다.

따라서 회원가입과 로그인 기능을 구현한 다른 팀원이 작성한 User 모델을 사용해야 하는데,

장고 프로젝트에서 다른 앱의 모델을 사용하는 방법은 다른 포스트에서 다뤄볼 예정이다.

 

리액트에서 해야 할 것은 API로 만들어진 장고 모델을 코드에 적용하는 것이다.

글쓰기의 POST 기능을 사용하기 위해 해당 파일을 수정한다.

 

파일 > (생략)/Write.js

...
axios.post("http://127.0.0.1:8000/review/write/", {
                ...
            }).then(function(response) {
                ...
                console.log(response)
                alert('등록이 완료되었습니다.')
            }).catch(function(error) {
                console.log(error)
                alert('문제가 발생했습니다.')
            }).finally(() => {
                history.push('/review')
            })
...

 

 

 

기본적인 뼈대 설정은 이렇게 완료했지만 프로젝트 내용 상

리액트에서의 데이터와 장고 모델에서 요구하는 데이터에 차이가 있어서 코드를 수정하고 추가하면서

장고 모델에 입력한 데이터를 올바로 넣는 것까지 완성하려면 아직 단계가 조금 더 남아있다.

남은 단계들은 앞으로의 포스트에서 추가적으로 다루도록 하겠다.