useEffect2 input alert 띄우기 과제 관련 질문드립니다.

[한지수]

안녕하세요. 선생님의 자바스크립트 강의에 이어 리액트도 감사히 잘 듣고 있습니다.

useEffect2 강의에서 input에 숫자 이외 문자 입력 시 alert로 안내창 띄우는 과제 관련하여 질문드립니다.

먼저 제가 작성한 Detail 코드입니다.
function Detail(props) {
  const [count, setCount] = useState(0);
  const [event, setEvent] = useState(true);
  const [message, setMessage] = useState("");
  const { id } = useParams();
  const products = props.shoeInfo.find((shoes) => {
    return shoes.id == id;
  });
  useEffect(() => {
    if (Number.isNaN(message) === false) {
      alert("숫자 적으세요");
    }
  }, [message]);
  useEffect(() => {
    const timer = setTimeout(() => {
      setEvent(false);
    }, 2000);
    return () => {
      clearTimeout(timer);
    };
  });

return (
    <>
      <div className="container" key={products.id}>
        {event === true ? (
          <div className="alert alert-warning">2초이내 구매시 할인</div>
        ) : null}
        {count}
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          버튼
        </button>
        <div className="row">
          <div className="col-md-6">
            
          </div>
          <div className="col-md-6">
            <input
              onChange={(e) => {
                setMessage(e.target.value);
              }}
            />
            <h4 className="pt-5">{products.title}</h4>
            <p>{products.content}</p>
            <p>{products.price}</p>
            <button className="btn btn-danger">주문하기</button>
          </div>
        </div>
      </div>
    </>
  );
}
export { Detail };

질문 1) useEffect부분에 isNaN(message)는 잘되고 Number.isNaN(message)는 안되는 이유가 궁금합니다.

처음에 답안 보기 전에는 useEffect부분에 Number.isNaN(message)를 썼는데 계속 alert 창이 안 떠서 결국 답을 보고 말았습니다.

혼자 생각해본 바로는 input의 입력값이 다 문자열이기 때문에 아예 Number.isNaN()은 Number만 다루기 때문에 애초부터 조건에 맞지 않아서 아무것도 동작하지 않는거라고 생각했습니다.

제가 생각한 것이 맞는지, 만약 아니라면 정확한 이유를 알고 싶습니다.

질문 2) 정규식으로 useEffect부분을 적을 경우 새로고침 할 때마다 페이지 로딩이 다 되기도 전에 alert창이 먼저 뜹니다. 이걸 해결할 방법을 알고 싶습니다.

useEffect와 input부분만 가져온 저의 Detail 코드입니다.

function Detail(props) {
  {/*---생략---*/}
  useEffect(
      () => {
        if (/^[0-9]+$/.test(message) === false) {
          alert("숫자 적으세요");
        }
      }, [message]);

{/*---생략---*/}

  return(
    {/*---생략---*/}
    <input onChange={(e) => {
        setMessage(e.target.value);
      }}/>
  )
    {/*---생략---*/}
}

이렇게 코드를 쓰면 로딩이 다 되기도 전에 alert창이 제일 맨 처음으로 뜨는 현상이 발생합니다. 
alert창이 처음에 안 뜨도록 하는 방법을 알고 싶습니다.

[codingapple]

isNaN이랑 Number.isNaN이랑 다른함수라서 그런듯요 
useEffect는 원래 로드시 실행되어서 그냥 onChange 안에 적어놔도 됩니다

[글쓴이]

글