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

안녕하세요 1-tier팀의 One입니다 😁

저번 포스팅에 이어 장고와 리액트 연동을 이어서 진행해봅시다. 

 

1편은 아래를 참고해주세요~ 

https://btcd.tistory.com/1520

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

Serialize

저번 포스팅 마무리에  데이터 반환값을 JSON으로 Serialize(직렬화)하는 과정이 필요하다고 언급을 했었는데요

 그렇다면 Serialize란 뭘까요??

 

쉽게 말해서 frontend로 데이터를 보내기위해 장고 내부의 복잡한 데이터들을 json/xml 등의 형태로

데이터를 변환해준다고 생각를 하면 됩니다.

 

Serialize는 DRF가 제공하는 클래스로, DB 인스턴스를 JSON 형식으로 생성합니다.

반대로 JSON을 DB로 변경하기 위해선 deserialize가 사용됩니다.

 

Serialize시엔 각각 DB 칼럼들로 정의를 해줘야합니다.

App 티렉토리에 serializers.py를 생성하고, 모델과 필드를 작성해줍니다.

from rest_framework import serializers
from .models import Review

class ReviewSerializer(serializers.ModelSerializer):
	class Meta:
    	model = Review
        fields = ('id', 'title', 'content', 'updated')

 

 

CRUD View 작성

CRUD 기능을 DRF의 클래스인 Mixins로 구현을합니다.

APIVew를 사용하면 비슷한 논리의 View가 계속 반복되는데,

Mixins로 구현하면 상속(CBV, Class Based View)이란 특성을 사용하여 불필요한 코드의 중복을 줄일 수 있습니다.

 

저는 Mixins를 통해 구현을 해보겠습니다.

먼저 필요한 모듈을 import 해줍니다.

from rest_framwork import generics, mixins
from .serializer import ReviewSerializer
from .models import Review

다음 CRUD View를 작성해줍니다.

class ReviewList(mixins.ListModelMixin,
                 mixins.CreateModelMixin,
                 generics.GenericAPIView):
    queryset = Review.objects.all()
    serializer_class = ReviewSerializer

    def get(self, request, *args, **kwargs):
        return self.list(request, *args, **kwargs)

    def post(self, request, *args, **kwargs):
        return self.create(request, *args, **kwargs)

class ReviewDetail(mixins.RetrieveModelMixin,
                   mixins.UpdateModelMixin,
                   mixins.DestroyModelMixin,
                   generics.GenericAPIView):
    queryset = Review.objects.all()
    serializer_class = ReviewSerializer

    def get(self, request, *args, **kwargs):
        return self.retrieve(request, *args, **kwargs)

    def put(self, request, *args, **kwargs):
        return self.update(request, *args, **kwargs)

    def delete(self, request, *args, **kwargs):
        return self.destroy(request, *args, **kwargs)

프로젝트 폴더 내부의 urls.py에 urls 내용을 작성해줍니다.

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

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

APP 폴더 내부에 urls.py를 생성하여 내용을 작성해줍니다.

from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from .views import ReviewList, ReviewDetail

urlpatterns = [
    path('review/', ReviewList.as_view()),
    path('review/<int:pk>/', ReviewDetail.as_view()),
]

urlpatterns = format_suffix_patterns(urlpatterns)

 

모든 코드 작성을 완료했으면 서버를 실행 후 

http://localhost:8000/review/ 를 들어가면 CRUD View를 확인할 수 있습니다.

 

간단하죠~😊

다음 시간에는 기다리고 기다리던 React와 연동을 해보도록 하겠습니다. 

 

다음에 포스팅에서 만나요!