[React] 달력 라이브러리 사용해보기

1. 달력 라이브러리?

프로젝트에서 상세페이지를 맡아 진행하던중 달력을 추가해보자는 의견이 있어서 급하게 찾아보던중 Day picker 라는 라이브러리를 찾게 되었다.

2. 라이브러리 설명서?

처음 사용해보는 라이브러리 였지만 사용방법과 스타일을 변경하는 방법 등등.. 사용하는 사람이 편리하도록 문서로 정리가 잘되어있었다. 온통영어였지만.. 그래도 번역기로 번역하면서 따라해보니 어렵진 않았던거 같다.

2-1. 사용해보기

//패키지 설치
npm install react-day-picker date-fns   # with npm
pnpm install react-day-picker date-fns  # with pnpm
yarn add react-day-picker date-fns      # with yarn

우선 라이브러리를 사용함에 있어서 필요한 패키지들을 설치해준다.

import React from 'react';
import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';

export default function Example() {
  const [selected, setSelected] = React.useState<Date>();

  let footer = <p>Please pick a day.</p>;
  if (selected) {
    footer = <p>You picked {format(selected, 'PP')}.</p>;
  }
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={footer}
    />
  );
}

그런다음 Daypicker사이트에있는 코드를 복사해서 붙혀넣은뒤npm start를 해보면..?

에러가뜬다.. 분명 잘따라한거같은데 안된다..
원인을 찾아보니 ESLint의 기본 parser는 Espree로, 기본적으로 ECMA 버전이 5로 설정되어있기 때문에 그 이후 문법이나 Typescript 문법은 parse하면서 에러를 뿜을 수 있다고 한다. 결론은 타입스크립트 문법이 들어가서 에러를 뿜었던것..!

//수정후 코드
export default function Example() {
  const [selected, setSelected] = React.useState();

블로그를 작성하면서 알았지만 리액트에서 hook을 사용할때 코드시트 최상단에 improt해서 사용해야하지만,

//예시
improt { useState } from 'React'

//새로 알게된 코드
const [selected, setSelected] = React.useState();

위의 두번째 코드처럼 import하지 않고 사용하는 방법을 알게되었다..! 오늘도 블로그를 쓰면서 리팩토링하며 몰랐던 내용을 알게되어서 뿌듯하다.

본론으로 돌아가서 코드를 수정한뒤 실행해보면?!

화면에 매우잘 렌더링되고, 클릭시 기능도 잘동작하는걸 볼수있다..!

2-2. 달력 언어 바꾸기

Day picker라이브러리는 기본적으로 여러가지 언어를 제공해줘서 사용하면서 굉장히 편리하다고 생각했다. 언어를 바꾸는 방법도 기본 설명사이트에 아주 친절하게 작성되어있다! (영문으로)

//한국어 적용 코드
import ko from 'date-fns/locale/ko'; // => date/locale 에서 한국어 로케일을 import

export default function Example() {
  const [selected, setSelected] = React.useState();

  let footer = <p>Please pick a day.</p>;
  if (selected) {
    footer = <p>You picked {format(selected, 'yyyy-MM-dd')}.</p>;
  }
  return (
    <DayPicker
      locale={ko} //props로 자식요소에게전달!
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={footer}
    />
  );
}

예를 들어 달력을 한국어로 현지화하려면 date-fns에서 로케일 객체를 가져와 구성 요소에게 props로 전달해주면..?

아름다운 우리말로 출력되는걸 확인할수있다!!

2-3. 달력 스타일적용하기

Day picker 사이트에 기본적으로 스타일을 적용시키는 방법이 영문으로 설명되어 있지만, 번역기를 돌려도 도저히 알아먹을수가 없어서 예시 코드들을보며 이것저것 해보던중 스타일을 바꿀수있는방법을 찾게되었다. 그것은바로 인라인 스타일을 적용하는것..!

return (
    <>
      <style>{`
      .rdp {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid #eceaeb; margin: auto; padding: 20px 0px; border-radius: 20px; margin-top: 30px;}
      .rdp-day_selected { background-color: #ff9100}
      .rdp-day_selected:hover {background-color: #ff9100}  
      .date {text-align: center; margin-top: 10px; background-color: #eceaeb; padding: 5px 0px; color: black; font-weight: bold; font-size: 1rem; border-radius: 20px;}
      `}</style>
      <DayPicker
        mode="single"
        locale={ko}
        selected={selected}
        onSelect={setSelected}
        footer={footer}
        hidden={isPastDate}
        components={{ Row: OnlyFutureRow }}
        fromDate={new Date()}
        showOutsideDays
      />
    </>
  );
}

컴포넌트 함수의 return문 안에서 인라인 스타일을 선언해준뒤 개발자 도구를 이용하여 스타일을 적용시키고 싶은 엘리먼트의 클래스 이름을 알아낸뒤 스타일을 적용시키면..?

아주아주 잘 적용되는것을 확인할수있다!