React로 FullCalendar Events 띄우기

React로 Events 띄우기

script로 event를 띄우는 방법과 거의 똑같다.
react를 이용한 fullCalendar 출력을 성공했다면, fullCalendar컴포넌트에 props로서 event값을 그저 정달해주면 전달한 내용에 따가 캘린더에 events가 출력되는걸 확인할 수 있다.

예시코드

<FullCalendar
  defaultView="dayGridMonth"
  plugins={calendarPlugins}
  weekends={false}
  events={[
    { title: 'event1', date: '2020-11-15' }
    { title: 'event2', date: '2020-11-18' }
  ]}
/>

백엔드에서 json정보 전달하기

Express프로젝트의 index.js라우터 코드. DB서버에 cal_events라는 테이블을 생성해서 이 테이블에서 정보를 가져오도록했다.
(db를 require하는 과정에 대해서는 생략)

var express = require('express');
var router = express.Router();

var db = require('../config/db');

router.get('/test, function(req, res)'{
  db.query(
  	`SELECT*FROMcal_events`,
     function(error, events) {
  	 	if(error) throw error;
  		res.json(events);
     }
   );
});
module.exports = router;

react에서 json정보 받기

백엔드에서 받은정보를 받기 위해 일단 react를 back-end서버의 프록시 서버로 설정해야합니다.
react프로젝트 내 package.json에
"proxy": "http://localhost:3003/"

import React, {Component} from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import axios from 'axios';

import 'main.css의 경로'

class App extends Component {
	state = {}

	componentDidMount() {
    	this._getEvents();
    }

    _getEvebts = async () => {
    	const events = await this._axiosEvents();
      	this.setState({
        	events
        })
    }
    
    _axiosEvents =()=> {
    	return axios.get('/test')
      		.then(res => res.data)
    }
    
    
   render() {
   	let {events} = this.state;
     
    return (
     <div className="App">
     {events? 
       <FullCalendar 
          defaultView="dayGridMonth" 
          plugins={[ dayGridPlugin ]}
          events={this.state.events}
        /> :
        'loading'
     }
     </div>
    )
   }

export default App;



} 

render(), _axiosEvents, _getEvents, componentDidMount 순으로 코드 순서와 '반대로' 설명하겠습니다.

1
render(): 컴포넌트 내 state 값에 events 정보가 담겼는지 확인하고, 담겼다면 FullCalendar 컴포넌트를 출력하고 그렇지 않다면 loading을 출력합니다.

2
_axiosEvents: axios의 get 메소드를 통해 Back-End의 /test url에 정보를 요청하고, 그에 따른 res.data 응답을 리턴합니다.

3
_getEvents: _axiosEvents이 응답을 받을 때 까지 기다리고, 응답을 받는다면 setState 메소드를 호출하여 state 값에 events라는 데이터를 넣어줍니다.

4
componentDidMount: 위의 모든 과정은 componentDidMount에 의해, 컴포넌트가 만들어지고 첫 렌더링을 모두 끝낸 후 실행됩니다.

5
결과적으로 state에는 Back-End에서 전송한 JSON 데이터가 events라는 이름으로 담깁니다.

출처 : im.uho