많은 웹 애플리케이션에서 날짜 선택기는 매우 중요한 기능입니다. 이번에는 React에서 Custom Hook을 활용하여 간단한 날짜 선택기 기능을 구현해 보겠습니다.

Custom Hook 생성

먼저, Custom Hook을 생성하기 위해 useDatePicker라는 이름의 함수를 만들어야 합니다. 이 함수는 선택한 날짜와 날짜를 변경하기 위한 함수를 반환해야 합니다.

import { useState } from 'react';

export const useDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return {
    selectedDate,
    handleDateChange,
  };
};

위의 코드에서는 useState를 이용해 selectedDate라는 상태 값을 생성하고, handleDateChange 함수를 통해 날짜를 변경할 수 있도록 구현했습니다.

컴포넌트에서 Custom Hook 사용

이제 Custom Hook을 이용하여 날짜 선택기 컴포넌트를 구현해 보겠습니다. 예를 들어, 다음과 같이 DatePicker 컴포넌트를 생성할 수 있습니다.

import React from 'react';
import { useDatePicker } from './useDatePicker';

const DatePicker = () => {
  const { selectedDate, handleDateChange } = useDatePicker();

  return (
    <div>
      <h2>날짜 선택기</h2>
      <input type="date" value={selectedDate} onChange={(e) => handleDateChange(e.target.value)} />
      <p>선택한 날짜: {selectedDate}</p>
    </div>
  );
};

export default DatePicker;

위의 코드에서는 useDatePicker Hook을 사용하여 selectedDate와 handleDateChange를 가져와서 날짜 선택기를 만들었습니다. 선택된 날짜는 <input type="date"> 요소를 통해 사용자에게 보여지며, 선택된 날짜는 하단에 출력됩니다.

이제 DatePicker 컴포넌트를 사용하여 원하는 곳에서 날짜 선택기를 렌더링하면 됩니다.

마치며

이번에는 Custom Hook을 활용하여 간단한 날짜 선택기 기능을 구현해 보았습니다. Custom Hook을 사용하면 여러 컴포넌트에서 재사용 가능한 로직을 추출하고, 코드의 재사용성과 가독성을 높일 수 있습니다.

더 복잡한 날짜 선택기 기능을 구현하고 싶다면, React DatePicker와 같은 외부 라이브러리를 사용할 수도 있습니다.

#React #CustomHook