React에서 Date Picker 구현하기

 

날짜 선택 기능은 많은 웹 애플리케이션에서 자주 사용되는 요소 중 하나입니다. React에서 Date Picker를 구현하는 방법은 여러 가지가 있지만, 이번 글에서는 대표적인 라이브러리와 직접 구현하는 방법을 소개합니다.

---

1. Date Picker 라이브러리 사용하기

React 생태계에는 Date Picker를 손쉽게 구현할 수 있는 라이브러리가 많이 있습니다. 그중 react-datepicker와 Material-UI Date Picker는 널리 사용됩니다.

1.1 react-datepicker 사용하기

react-datepicker는 설치와 사용이 간단하고, 다양한 기능을 제공하는 Date Picker 라이브러리입니다.

설치

npm install react-datepicker
npm install date-fns

기본 사용 예제

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div>
      <h2>Select a Date</h2>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="yyyy/MM/dd"
      />
      <p>Selected Date: {selectedDate ? selectedDate.toDateString() : 'None'}</p>
    </div>
  );
}

export default App;

주요 기능

• 날짜 형식 지정 (dateFormat 속성).
• 최소/최대 날짜 설정 (minDate, maxDate 속성).
• 시간 선택 기능 추가 (showTimeSelect 속성).

1.2 Material-UI Date Picker 사용하기

Material-UI의 Date Picker는 Google의 Material Design 가이드라인을 따르는 컴포넌트로, 아름다운 UI를 제공합니다.

설치

npm install @mui/x-date-pickers @emotion/react @emotion/styled

기본 사용 예제

import React, { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker } from '@mui/x-date-pickers';

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <h2>Select a Date</h2>
      <DatePicker
        label="Choose a date"
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        renderInput={(params) => <input {...params} />}
      />
      <p>Selected Date: {selectedDate ? selectedDate.toDateString() : 'None'}</p>
    </LocalizationProvider>
  );
}

export default App;

---

2. Date Picker 직접 구현하기

라이브러리를 사용하지 않고, 간단한 Date Picker를 직접 구현할 수도 있습니다. HTML의 <input type="date">를 활용하거나, 커스텀 UI를 만들 수 있습니다.

2.1 기본 HTML Date Input 사용

import React, { useState } from 'react';

function App() {
  const [selectedDate, setSelectedDate] = useState('');

  return (
    <div>
      <h2>Select a Date</h2>
      <input
        type="date"
        value={selectedDate}
        onChange={(e) => setSelectedDate(e.target.value)}
      />
      <p>Selected Date: {selectedDate || 'None'}</p>
    </div>
  );
}

export default App;

2.2 커스텀 Date Picker 구현

import React, { useState } from 'react';

function CustomDatePicker() {
  const [selectedDate, setSelectedDate] = useState('');

  const days = Array.from({ length: 31 }, (_, i) => i + 1);
  const months = Array.from({ length: 12 }, (_, i) => i + 1);
  const years = Array.from({ length: 100 }, (_, i) => new Date().getFullYear() - i);

  return (
    <div>
      <h2>Custom Date Picker</h2>
      <select onChange={(e) => setSelectedDate(`${e.target.value}-${selectedDate.split('-')[1] || '01'}-${selectedDate.split('-')[2] || '01'}`)}>
        {years.map((year) => (
          <option key={year} value={year}>{year}</option>
        ))}
      </select>
      <select onChange={(e) => setSelectedDate(`${selectedDate.split('-')[0] || new Date().getFullYear()}-${e.target.value}-${selectedDate.split('-')[2] || '01'}`)}>
        {months.map((month) => (
          <option key={month} value={month.toString().padStart(2, '0')}>{month}</option>
        ))}
      </select>
      <select onChange={(e) => setSelectedDate(`${selectedDate.split('-')[0] || new Date().getFullYear()}-${selectedDate.split('-')[1] || '01'}-${e.target.value}`)}>
        {days.map((day) => (
          <option key={day} value={day.toString().padStart(2, '0')}>{day}</option>
        ))}
      </select>
      <p>Selected Date: {selectedDate || 'None'}</p>
    </div>
  );
}

export default CustomDatePicker;

---

3. 결론

React에서 Date Picker를 구현하는 방법은 다양하며, 요구 사항에 따라 적합한 방식을 선택하면 됩니다. 라이브러리를 사용하면 개발 속도를 높이고 유지보수를 간편하게 할 수 있지만, 커스텀 구현은 더 많은 제어권을 제공합니다. 필요에 따라 위의 방법들을 활용해 보세요!