[Datepicker] useState의 비동기적 특성으로 상태 업데이트 지연 이슈
Dev/Nextjs·2025. 4. 12.
1. React DatePicker의 Range 선택 문제 해결하기React 프로젝트에서 DatePicker를 사용할 때, range 선택 시 첫 번째 날짜 선택 후 즉시 반영되지 않는 문제가 발생할 수 있습니다.이는 React의 useState 비동기 업데이트 특성 때문입니다.이 글에서는 이 문제를 해결하는 최적의 방법을 소개합니다.1.1. 문제 상황🔹 개발 조건DatePickerType="range" 또는 "single" (기본값은 "single")달력은 하나만 사용하여 시작일과 종료일을 선택첫 번째 선택한 날짜는 시작/종료일 구분 없음두 번째 클릭한 날짜와 비교하여 범위를 자동 설정두 번째 날짜가 더 작으면 → 첫 번째 날짜를 endDate, 두 번째 날짜를 startDate로 설정두 번째 날짜가..