[ArentCar][PS] 쉼표 연산자로 인한 useState 초기값 설정 오류 문제 - 해결

코드

예약 시작일

const [reservationStartDate, setReservationStartDate] = useState((new Date(), 7)); // 예약 시작일 (기본 값은 일주일 전)

 

예약 종료일

 const [reservationEndDate, setReservationEndDate] = useState(new Date()) // 예약 종료일 (기본 값은 오늘)

---

원인

• 쉼표 연산자의 동작 방식으로 인해서 `useState((new Date(), 7))이 작동하지 않음
• 쉼표 연산자는 여러 표현식을 순차적으로 평가하고, 그 중 가장 마지막 표현식의 값을 반환하는 연산자

따라서 `newDate(), 7`을 사용하면

1. new Date()는 현재 날짜와 시간을 나타내는 Date 객체 생성
2. 7은 그 뒤에 오는 값인데, 마지막 값이므로 7을 반환함, 즉 `useState`는 7이라는 값으로 초기화 됨
3. 2번의 7은 일주일 전의 7이 아닌, 단순한 숫자 7임

---

해결 방법

new Date()를 사용하여 날짜를 설정하고 싶다면, 쉼표 연산자를 사용하지 않고, 값을 반환하는 표현식 자체를 바꾸어야 함

 

const [startDate, setStartDate] = useState(() => {
        const date = new Date();
        date.setDate(date.getDate() - 7); // 일주일 전
        return date.toISOString().split('T')[0].replace(/-/g, ''); // "YYYYMMDD" 형식으로 변환
    });

1. `new Date()`로 오늘 날짜를 생성
2. `.setDate()`로 현재 날짜에서 7일을 빼서 일주일 전 날짜를 계산
3. 계산된 날짜 객체를 `useState`의 초기값으로 설정