쉬운 목차

추가 비활성화 속성 적용

공식 문서에 작성되어 있지만 비활성화된 속성이 하나 있습니다.
이 속성이 true이면 이 입력이 비활성화됩니다.
이것은 날짜가 설정되기 전에 시간이 설정되는 것을 방지할 수 있습니다.
- 왜 그래야만 하는가
- 날짜 선택기는 원래 과거도 선택할 수 있도록 설계되었습니다.
- 제 경우에는 현재 시간보다 빠른 시간이 선택되지 않도록 해야 하는 유일한 경우는 날짜가 현재 날짜일 때입니다.
- 이 부분에 대한 커스텀 날짜 선택기 기능을 찾아 구현하는데 많은 시간이 소요될 것으로 예상되었습니다.
처음에는 어떻게 해야할지 삽질을 많이 했지만 점차 삼항 연산자의 중요성과 유용성을 느끼면서 이번에도 같은 방법으로 풀었습니다.
} 비활성화={!시작일 ? 참 : 거짓 } />
여기까지 오는 데 많은 경험이 필요했지만 실제로 결과는 간단합니다.
위의 startDate가 참인지 거짓인지에 따라 disabled 속성에 대한 삼항 연산자를 사용하여 disabled 속성을 true 또는 false로 변경할 수 있습니다.
- startDate의 값은 위의 날짜 선택기에서 날짜를 설정한 경우에만 변경됩니다.
```
const (startDate, setStartDate) = useState(false);
```

날짜 순서가 잘못된 경우 어떻게 해야 합니까?

날짜(시간)의 순서도 올바르지 않을 수 있습니다.
이 경우 send 함수에 조건문을 제공할 수 있습니다.

		if (new Date(open) > new Date(close)) {
      setDateOrderError(true);
      return;
    }

다음 포스트에서 자세히 다루겠지만, 제 경우에는 YYYY-MM-DD HH:mm 형식으로 서버에 보내야 해서 startDate와 startTime을 합쳐서 열었습니다.
const (열기, setOpen) = useState(“”); ////// useEffect(() => { if (startDate !== false && startTime !== false) { const year = startDate.getFullYear().toString(); //연도 뒤 4자리 const 월 = (“0” + (startDate.getMonth() + 1)).slice(-2); //월의 두 자리(01, 02 … 12) const day = (“0” + startDate.getDate ( )) .slice(-2); //2자리 일(01, 02 … 31) const hour = (“0” + startTime.getHours()).slice(-2); //2- 숫자 시( 00, 01 … 23) const 분 = (“0” + startTime.getMinutes()).slice(-2); //두 자리 분(00, 01 … 59) const 초 = ( “0 ” + startTime .getSeconds()).slice(-2); //두 자리 초(00, 01 … 59) const returnDate = 연도 + “-” + 월 + “-” + 일 + ” ” + 시 + “: ” + 분 + “:” + 초; setOpen(returnDate); } }, (startDate, startTime, setOpen));
따라서 다시 열기는 날짜 개체를 만들고 닫기와 비교합니다.
- 날짜 개체의 경우 날짜가 빠를수록 값이 작아집니다.
- 그리고 시작 날짜가 종료 날짜 이후인 경우에는 조건문을 입력하고 제출 기능 자체를 종료하기 위해 리턴하여 기능을 구현할 수 있습니다.

날짜 형식 변경 및 useState의 비동기 문제

이제 이벤트 날짜를 지정했으므로 이 데이터를 서버로 보낼 수 있습니다.
다만 제 경우에는 기존 날짜 객체 형식으로 YYYY-MM-DD HH:mm로 보내야 했습니다.
여기에 문제가 있습니다
- submit 함수에서 setState에 의해 날짜 형식이 변경된 경우 사용자가 날짜를 지정하고 바로 저장을 클릭하면 useState 비동기 문제로 인해 날짜가 수정되지 않은 날짜 객체 형식으로 전송됩니다.
- 그러나 사용자가 시작 날짜를 변경할 때 useEffect를 사용하여 형식을 변경하면 변경된 형식으로 인해 입력 창에 잘못된 값이 표시됩니다.

그래서 내 솔루션은 두 솔루션의 혼합입니다.

useEffect를 사용하여 사용자가 날짜를 변경할 때 즉시 형식을 변경하십시오.
새 상태 값을 사용해야 합니다.

const (open, setOpen) = useState("");
//////
useEffect(() => {
    if (startDate !== false && startTime !== false) {
      const year = startDate.getFullYear().toString(); //년도 뒤에 네자리
      const month = ("0" + (startDate.getMonth() + 1)).slice(-2); //월 2자리 (01, 02 ... 12)
      const day = ("0" + startDate.getDate()).slice(-2); //일 2자리 (01, 02 ... 31)
      const hour = ("0" + startTime.getHours()).slice(-2); //시 2자리 (00, 01 ... 23)
      const minute = ("0" + startTime.getMinutes()).slice(-2); //분 2자리 (00, 01 ... 59)
      const second = ("0" + startTime.getSeconds()).slice(-2); //초 2자리 (00, 01 ... 59)
      const returnDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      setOpen(returnDate);
    }
  }, (startDate, startTime, setOpen));

이것은 useEffect의 비동기 문제를 해결합니다.

useEffect 비동기 문제는 React에서 작업하는 동안 지속적으로 저를 괴롭혔던 문제입니다.
계속 정리할 것 같긴 한데 핵심 리액트나 렌더링 기능과 얽혀있고, 알고 싶은게 잘못된 경우가 많아서 정리가 잘 안되네요 .
하지만 이제 작은 해결책을 찾았습니다.
- 하나는 useEffect 내부에서 setState를 실행하기 위해 중간에 useEffect를 사용하는 것입니다.
- 또 다른 방법은 useRef를 사용하여 변경하는 것입니다.
- 마지막은 setState에서 함수로 설정하는 것입니다. → 어떤 이유로 작동하지 않는 경우가 몇 번 있었습니다. (다음에는 좀 더 깊이 이해해야겠습니다.)
- 나는 useEffect를 논리적으로 이해하고 있기 때문에 useEffect를 많이 사용하는 편이다.
  - 다음에는 useRef나 함수 유형을 명확하게 이해하고 넘어가고 싶습니다.
useState가 비동기인 이유에 대한 아래의 좋은 기사를 작성하여 이 부분을 먼저 마무리하겠습니다.

useState가 비동기인 이유는 무엇입니까?

useState(정확히 말하면 setState)가 비동기적으로 작동하는 이유는 무엇입니까?

페이지를 구성하는 수많은 상태가 있습니다. 각 상태 변경에 대한 재렌더링이 있는 경우 성능 패널티가 있습니다. 이 문제를 해결하기 위해 React는 연속적으로 setState를 호출하면 배치 처리를 통해 즉시 렌더링합니다. 여러 setState를 차례로 사용해도 일괄 처리로 인해 한 번만 렌더링됩니다.

Batch는 React가 여러 상태 업데이트를 하나의 re-rendering으로 묶는 것을 의미합니다.React는 16ms 동안 변경된 상태 값을 묶습니다. (16ms 단위로 배열됩니다.)

이 때문에 useState는 비동기식입니다.
하나를 변경하면 변경된 상태가 업데이트되지 않습니다.