[React] ts로 사용자훅쓰기

• 왜 썼는가? : 코드길이 단축, 다른파일에서 같은기능 재사용하기 위해

원본

interface Date {
  year: number;
  month: number;
  day: number;
}

const CareList = () => {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  const onDateSelected = (value: any) => {
    if (value.from && value.to) {
      setStartDate({
        year: value.from.year,
        month: value.from.month,
        day: value.from.day,
      });
      setEndDate({
        year: value.to.year,
        month: value.to.month,
        day: value.to.day,
      });
    }
  };
  ...
  return(
  <ReactCalendar onDateSelected={onDateSelected} />
)

개선버전

• Hook 폴더에 use어쩌고.ts 파일을 생성
• 해당기능 그대로 넣고 return과 export만 주의해서 작성

//useDateSelect.ts
import { useState } from 'react';

interface Date {
  year: number;
  month: number;
  day: number;
}

const useDateSelection = () => {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  const onDateSelected = (value: any) => {
    if (value.from && value.to) {
      setStartDate({
        year: value.from.year,
        month: value.from.month,
        day: value.from.day,
      });
      setEndDate({
        year: value.to.year,
        month: value.to.month,
        day: value.to.day,
      });
    }
  };

  return { startDate, endDate, onDateSelected };
};

export default useDateSelection;

• return한 변수들 빼서 쓰면 됨. hook으로 뺐던부분 작성할필요 없음

//개선된 원본
import useDateSelect from '../Hook/useDateSelect';

const CareList = () => {

const { startDate, endDate, onDateSelected } = useDateSelect();
 
return(
  <ReactCalendar onDateSelected={onDateSelected} />
 }