ReactJS - Date Picker: A Beginner's Guide

안녕하세요, 야심 찬 개발자 여러분! 오늘 우리는 ReactJS Date Pickers의 세계로 흥미로운 여정을 떠납니다. 코드를 작성한 적이 없어도 걱정하지 마세요 - 저는 친절한 안내자가 되어 단계별로 모든 것을 설명해 드릴 것입니다. 이 튜토리얼이 끝나면, 여러분은 React 애플리케이션에 멋진 날짜 선택기를 추가할 수 있을 것입니다. 시작해 보겠습니다!

ReactJS - Date Picker

날짜 선택기는 무엇인가요?

코딩을 시작하기 전에 날짜 선택기가 무엇인지 이해해 보겠습니다. 인터넷으로 항공편을 예약할 때, 여행 날짜를 선택해야 하죠? 띄워지는 캘린더에서 날짜를 선택할 수 있는 그것이 바로 날짜 선택기입니다! 날짜 선택기는 사용자 인터페이스 요소로 날짜 선택을 쉽고 직관적으로 만들어줍니다.

React에서 날짜 선택기를 사용하는 이유

React는 상호작용적인 사용자 인터페이스를 만드는 것이 목적이며, 날짜 선택기는 이러한 목적의 완벽한 예입니다. 날짜 선택기는 시각적인 캘린더를 제공하여 날짜 선택을 쉽게 하고, 오류를 줄이며 앱을 더 친화적으로 만듭니다.

React Date Picker 시작하기

React에서 날짜 선택기를 사용하려면 react-datepicker라는 인기 있는 라이브러리를 사용할 것입니다. 이 라이브러리는 우리의 React 애플리케이션에 쉽게 통합할 수 있는 커스터마이즈 가능한 컴포넌트를 제공합니다.

Step 1: React 프로젝트 설정

먼저 새로운 React 프로젝트를 만들어 보겠습니다. 이미 프로젝트가 있다면 이 단계를 건너뛰세요.

npx create-react-app my-datepicker-app
cd my-datepicker-app

이 명령어는 "my-datepicker-app"이라는 이름의 새로운 React 애플리케이션을 만들고 프로젝트 디렉토리로 이동합니다.

Step 2: 날짜 선택기 라이브러리 설치

이제 react-datepicker 라이브러리를 설치해 보겠습니다:

npm install react-datepicker

이 명령어는 날짜 선택기 라이브러리를 프로젝트에 추가합니다.

날짜 선택기 컴포넌트 적용하기

이제 날짜 선택기를 우리 애플리케이션에서 실제로 사용해 보겠습니다!

Step 1: 필요한 모듈 가져오기

src/App.js 파일을 엽니다. 맨 위에 다음 import 문을 추가하세요:

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

각 줄이 하는 일은 다음과 같습니다:

useState를 React에서 가져와 컴포넌트 상태를 관리합니다.
설치한 라이브러리에서 DatePicker 컴포넌트를 가져옵니다.
CSS 파일을 가져와 날짜 선택기를 스타일링합니다.

Step 2: 기능 컴포넌트 생성

이제 날짜 선택기를 사용하는 기능 컴포넌트를 만들어 보겠습니다:

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

return (
<div className="App">
<h1>My Awesome Date Picker</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
placeholderText="Select a date"
/>
<p>Selected date: {selectedDate ? selectedDate.toDateString() : "No date selected"}</p>
</div>
);
}

이를 구분해 보면:

useState를 사용하여 selectedDate 상태 변수와 setSelectedDate 함수를 만듭니다.
DatePicker 컴포넌트를 렌더링하고 다음 프로퍼티를 사용합니다:

selected: 현재 선택된 날짜
onChange: 새 날짜가 선택될 때 호출되는 함수
dateFormat: 날짜가 어떻게 표시되는지 설정
placeholderText: 날짜가 선택되지 않았을 때 표시되는 텍스트

선택된 날짜를 선택기 아래에 표시하거나 날짜가 선택되지 않았을 때 메시지를 표시합니다.

Step 3: 날짜 선택기 커스터마이징

react-datepicker는 매우 커스터마이즈 가능한 점이 큰 장점입니다. 우리의 날짜 선택기를 몇 가지 방법으로 수정해 보겠습니다:

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

return (
<div className="App">
<h1>My Customized Date Picker</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
showYearDropdown
scrollableYearDropdown
/>
</div>
);
}

이 예제에서:

minDate={new Date()}는 과거 날짜를 선택할 수 없도록 합니다.
filterDate는 주말(토요일과 일요일)을 비활성화합니다.
showYearDropdown와 scrollableYearDropdown는 연도 드롭다운을 추가하여 연도를 빠르게 변경할 수 있게 합니다.

날짜 선택기 메서드

react-datepicker 라이브러리는 몇 가지 유용한 메서드를 제공합니다. 다음 표는 몇 가지 메서드를 요약합니다:

메서드	설명
`setOpen(boolean)`	캘린더의 열림 상태를 수동으로 설정합니다.
`setFocus()`	입력에 수동으로 포커스를 설정합니다.
`handleCalendarClose()`	캘린더를 수동으로 닫습니다.
`handleCalendarOpen()`	캘린더를 수동으로 엽니다.

이러한 메서드를 사용하려면 DatePicker 컴포넌트에 레퍼를 생성합니다:

const datePickerRef = useRef(null);

// 나중에 JSX에서 사용
<DatePicker ref={datePickerRef} />

// 메서드 사용
datePickerRef.current.setOpen(true);

결론

축하합니다! 지금까지 React에서 날짜 선택기를 구현하고 커스터마이즈하는 방법을 배웠습니다. 이 강력한 도구는 사용자가 날짜를 선택하는 데 큰 도움이 될 것입니다.

React(또는 다른 프로그래밍 개념)을 마스터하려면 연습이 중요합니다. 프로젝트에 날짜 선택기를 추가하고 다양한 프로퍼티를 실험해 보세요. 고급 기능을 배우기 위해 문서를 탐색하지 마세요.

快乐的 코딩 되세요, 그리고 날짜가 항상 완벽하게 선택되길 바랍니다! ?️?‍?

Credits: Image by storyset