React/FullCalendar next,prev 이벤트 핸들링

내가 못찾은건진 모르겠지만 FullCalendar의 next,prev 버튼을 누를 경우 react fullCalendar에서 특정 함수를 실행시켜 줄 수 있는 메소드(?)를 제공해주지 않아 정말 많은 시행착오들이 있었다.

          <FullCalendar
            id="leaveCalendar"
            dateClick={this.handleDateClick}
            defaultView="dayGridMonth"
             header={{
              left: " prev  ",
              center: "title ", 
              right: "  next   "
            }}
            plugins={[dayGridPlugin, interactionPlugin ]}
            selectable="true"
            editable="true"
            locale="ko"
            height='parent'
            events={this.monthChange}
           />   

--FULLCALENDAR

일단 여기에서 next와 prev를 누를경우 특정 함수를 실행시키고 싶었다
1. 버튼 생성 -> FullCalendar의 prev버튼 trigger -> 함수 실행 ==> 비효율적
2. FullCalendar의 customButton 생성

FullCalendar에서 제공해주는 event 가 유일하게 달이 바뀔때마다 실행되는 요소이기에 위의 코드처럼 event={this.monthChange} 함수를 실행해주었다.

monthChange = () => {
  var monthDt = $(".fc-center > h2").html();
  this.setState({
    monthDiff : monthDt
  })
 
}

위의 monthChange함수는 이렇다.

여기에서 .fc-center > h2 즉 FullCalendar의 center에 위치한 월을 가리키는 것이다.

그리하여 next나 prev를 눌렀을 경우 2020년 8월 즉 날짜는 계속 바뀔 것이다. 이를 state로 잡아주었다.
그다음 나는 Class형 컴포넌트라 componentDidUpdate를 써주었다. 만약 함수형 컴포넌트라면 useEffect를 써주면 될 거 같다.  this.state.monthDiff와 이전 상태값이 서로 다를 경우에만 loadIcon이라는 특정 함수를 실행시켜주었다.

componentDidUpdate(_prevProps,prevState){
  if(this.state.monthDiff != null){
    if(this.state.monthDiff !== prevState.monthDiff ){ 
      loadIcon(this.state.empCd);  
  } 

---
그리고 만약 FullCalendar에서 제공해주는 customButton을 사용할 경우

customButtons={{
                  myButton: {
                    text: '커스텀',
                    click: function() {
                      alert('버튼을 클릭했습니다.');
                    },
                  },
                }}

중괄호를 한번 싸주는 것이 아니라 React의 jsx문법때문에 한번 더 감싸줘야 myButton이 인식이 된다. 그다음 지정해준 myButton을

                    header={{

                        left: ' prev myButton  ',

                        center: 'title ',

                        right: 'next myCustomButton',

                    }}

추가해줄 경우 커스텀 버튼이 표시된다.