Django 가장 중요한 부분 (onChange 함수)

onChnage 함수의 발생 시점은 조회 버튼을 누른 후, 페이지를 넘겼을 때부터이다. 

antd 라이브러리의 Table 컴포넌트의 sorter 기능을 통해서 기본적으로 정렬 값을 setting 해주었기 때문에 조회 버튼을 누른 시점에서는 onChange 함수가 동작하는 조건이 아니게 된다. 그러므로 우리가 

 

setSort (sorter.field? sorter.order === "ascend"? "-cruzlink." + sorter.field + ".keyword": "cruzlink."+sorter.field+".keyword":"cruzlink.TRN_GID.keyword")

    setFilter('');

    fetch({

      pagination,

      filter,

      sort

    });

 조회 버튼을 눌렀을 때는 onChange(setSort) 함수가 발동하지 않는다. 따라서 아직 sorter.field의 값은 NULL이고 

페이지를 한 번 넘겼을 때는 최초 실행이므로 sorter = useState("

cruzlink.TRN_GID.keyword

.TRN_GID")가 된다. 그 다음 페이지네이션부터 onChange 함수에 의해 setSort함수가 발동되고 조건문에서 걸리게 되므로 "sorter.field에 값이 존재하지 않다면"조건에 걸리므로 오류가 발생한다. 따라서 예외처리를 위 코드와 같이 해주어야 한다.

 

** 수정 **

위 코드로 sorter 값을 바꿔 버리면 정상 작동하지 않는다. 그리고 ascend, descend 기능만 있고 cancel 기능은 작동하지 않는다. 따라서 페이지가 마운트 될 때는 테이블에 랜덤으로 값을 뿌려주고, 정렬을 했을 때 값이 정렬되고 cancel 기능을 작동하게 하려면 

1.useState에서 sort의 기본 값을 ("")로 초기화한다. 그리고  페이지네이션이 될 때, Django의 views.py에서 sort가 빈 값일 때 sort를 타지 않도록  조건문을 추가해준다. --> 랜덤으로 값을 뿌림

2. 리액트에서 console.log(sort)를 찍어보면 cancel 버튼이 눌렸을 때, sorter.field 값은 존재하고 order = undefined 상태이므로 이 것에 맞게 조건문을 수정해야한다. 

 

 

코드는 다음과 같다. 

views.py 

 if es_sort != '' :

         s=s.sort(es_sort)

Nospoon.js (src/ componts 폴더) 

  const [sort,setSort] = useState("");

 

  if (sorter.field && sorter.order=="ascend") {

      setSort("-cruzlink."+sorter.field+".keyword")

      // setSort("cruzlink."+sorter.field+".keyword")

    }

    else if  (sorter.field && sorter.order=="descend") {

      setSort("")

      // setSort("-cruzlink."+sorter.field+".keyword")

    }

    else if (sorter.field && sorter.order== undefined) {

   

      setSort("cruzlink."+sorter.field+".keyword")

      // setSort("")

    }

즉, 저 sort 변수와 sorter가 핵심이다. 

  ### ant Table components의 columns 부분

 const columns = [

 

  {

      title: "GID",

      dataIndex: "TRN_GID",

      width: "20%",

      align: "left",

      sorter: (a, b) => a.TRN_GID - b.TRN_GID,

 

    }]