React DatePicker 날짜 & 시간 저장 오류

https://www.npmjs.com/package/react-datepicker

react-datepicker

React DatePicker를 활용하여 날짜와 시간을 입력받고 있었는데

여기서 문제가 발생했다 날짜 선택 이후 시간을 선택하면 달력 모달이 꺼지게 되어있는데 이때 시간을 선택하면 이전에 선택하였던 날짜가 초기화되는 오류가 발생되었다.

이 문제를 해결하기 위해 구글 검색도 해보고 chat GPT에게도 물어봤지만 답은 나오지 않았다.

공식 문서의 date & time 이 구현 된 예제를 보고 똑같이 따라 했는데 정상 작동되어서 문제의 원인을 찾았다.

onChange가 발생할 때 date를 저장해주는 state를 생성하여서 관리하였더니 date가 정상적으로 출력되는 걸 확인할 수 있었다.

1
2
3
4
5
6
7
8
9const [saleDate, setSaleDate] = useState<null | Date>(null);

onChange={(date) => {
            console.log(date), setSaleDate(date);
            dispatch({
                 type: 'setTestDate',
                 payload: format(new Date(date!), 'yyyy-MM-dd HH:mm'),
            });
}}