ref 사용법 (캘린더 라이브러리에서 '오늘' 버튼 구현하기)

ref : DOM요소에 직접 접근할 수 있게 해주는 것

어떤 경우에 쓰이는가?

input요소를 클릭하지 않아도 자동으로 focus를 주고 싶을 때

함수형 컴포넌트에서 ref 사용법

//리액트 상단에서 Import 하기
import { useRef } from 'react';

// 컴포넌트에 Useref사용 설정
const calendarRef = useRef(); 

//캘린더 라이브러리 컴포넌트에서 ref 등록
<Calendar
  ref={calendarRef} /> 

이렇게 설정하면 calendarRef.current를 통해 원하는 동작을 할 수 있음
-> 값을 변경해도 렌더링 되지 않음. -> 변수들이 가진 값이 그대로 유지됌

//이번달로 이동하는 핸들러
  const onClickTodayHandler = () => {
    const calendar = calendarRef.current;
    const firstDayOfTodaysMonth = moment().date(1).toDate();
    calendar.setActiveStartDate(firstDayOfTodaysMonth);
  };

캘린더의 setActiveStartDate 속성을 이번달로 변경
캘린더 라이브러리 찾아보니까 setActiveStartDate에 대한 속성은 나와있지 않았으나
ActiveStartDate 속성은 캘린더 시작일을 나타낸다고 함.

moment

moment()

현재 날짜 및 시간 생성

moment().date(숫자)

Moment 객체 의 날짜를 가져오거나 설정하는 데 사용됩니다. 날짜 설정 범위는 1~31까지 가능합니다. 범위를 초과하면 이전 또는 다음 달로 날짜가 확장됩니다. 이는 31일이 모두 없는 달에서도 마찬가지이므로 더 큰 값을 사용하면 다음 달로 이동합니다.

moment().toDate()

자바스크립트 객체로 바꿔줌

참고자료: Today Button