React 앱에 캘린더 추가하기

두 달 전에 ~80명 앞에서 발표했습니다(물론 사실상). 프레젠테이션이 끝난 후 캘린더 라이브러리 구현과 날짜에 대한 사용자 클릭을 기반으로 데이터를 동적으로 렌더링하는 방법에 대해 꽤 많은 질문을 받았습니다.



요청에 따라 간단하지만 강력한 React 라이브러리의 도움을 받아 대화형 캘린더를 구축하는 저의 작은 여정이 여기에 있습니다.

React 캘린더 라이브러리 활용

많은 캘린더 라이브러리가 있습니다. 저는 방금 찾은 첫 번째 라이브러리를 선택했습니다: React-Calendar .



설명서는 명확하고 초보자에게 친숙합니다. 내가 한 것은 tl;dr 섹션의 세 단계를 따르는 것뿐이었습니다.

npm install react-calendar 또는 yarn add react-calendar 를 실행하여 설치합니다.

import Calendar from 'react-calendar'를 추가하여 가져옵니다.

<Calendar />를 추가하여 사용합니다. 새 값을 얻으려면 onChange 소품을 사용하십시오.

그리고 짜잔 -- 처음부터 달력을 만들 필요 없이 방금 달력을 만들었습니다! 모든 오픈 소스 커뮤니티를 환영합니다 🙌

달력을 데이터에 연결

멋져요, 우리 페이지에 잘 짜여진 달력이 있습니다. 달력 날짜를 데이터에 지정된 날짜에 어떻게 연결할 수 있습니까?

React Calendar 문서에는 작성자가 현재 클릭 중인 날짜를 저장하기 위해 onChange 소품을 사용하여 시연한 basic usage section이 있습니다.

import React, { Component } from 'react';
import Calendar from 'react-calendar';

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
        />
      </div>
    );
  }
}

다음은 React Hooks를 활용하는 단순화된 기능적 구성 요소 버전입니다.

import React, { useState } from 'react';
import Calendar from 'react-calendar';

export default function Results() {
    // set states of calendar date
    const [calDate, setCalDate] = useState(new Date())

    function onChange (calDate) {
        // change results based on calendar date click
        setCalDate(calDate)
    }

    return (
        <div className="result-calendar">
            <Calendar onChange={onChange} value={calDate} />
        </div>
    )

}

그런 다음 내 onChange 함수 내에서 내 데이터( userResults )를 가져와서 현재 강조 표시된 달력 날짜와 비교하고 날짜가 같은 데이터만 표시합니다.

요령이자 저에게 가장 큰 도전은 데이터의 날짜 형식이 React-Calendar의 날짜 형식과 일치하는지 확인하는 것이었습니다.

다음은 내 onChange 함수의 전체 코드 스니펫입니다.

function onChange (calDate) {
    setCalDate(calDate)

    const filteredResults = userResults.filter(result => {
        const newResultFormat = new Date(result.created_at).toLocaleString().split(",")[0]
        const newCalDateFormat = calDate.toLocaleString().split(",")[0]
        return newResultFormat === newCalDateFormat
    })
}

스타일링

마지막으로 라이브러리와 함께 제공되는 CSS 덕분에 글꼴과 색상을 가지고 놀 수 있습니다.

그러나 먼저 CSS를 JS 파일로 가져오는 것을 잊지 마십시오.

import 'react-calendar/dist/Calendar.css';

그런 다음 자신의 스타일시트에서 앱에 맞는 맞춤 스타일을 조정하세요. 내 접근 방식은 콘솔의 요소 검사기에서 디스플레이를 보고 어떤 선택기가 어떤 레이아웃을 제어하는지 찾은 다음 그에 따라 스타일을 조정하는 것이었습니다.

.react-calendar__month-view__weekdays {
  color: gray;
}

.react-calendar__navigation button {
  font-size: 1em;
}

솔직히 말해서 외부 React 라이브러리를 첫 번째 React-Hooks-Redux 앱에 통합하는 것이 처음이라는 점을 고려하면 구현이 제대로 작동할지 확신할 수 없었습니다.

알고 보니 작업은 내가 상상했던 것만큼 벅차지는 않았습니다.

그래서 이 경험에서 얻은 가장 큰 교훈은 우리 모두 자신에 대해 조금 더 믿음을 가질 필요가 있다는 것입니다. 첫 번째 단계를 밟고, 시도하고, 다시 시도해야 합니다.