React : 숫자가 아닌 값을 찾는 함수 = > isNAN

isNan

 

예시 문제

 

✅input창에 숫자가 아닌 다른 걸 입력했을때 경고창이 뜨게 하자.

 

 + 단, useEffect를 이용해보자

 

 

결과 페이지

 

 

1. useState를 통해  input값을 읽어올 아이를 만들자 " 경고,경고변경 "

2. input창을 만들어 input에 입력된 값들을 onchange를 통해  가져오는데 그값은 '경고변경' state로 담아줄거다.

3. 담긴값이 숫자인지 문자인지 판별하기 위해 useEffect를 써서 확인을  해볼거다.

 

 

 

4. inNan ( ) 함수는 숫자가 아닌다른 무언갈 썻을때  발생한다. 

만약 숫자가 아니면 true 숫자면 false로 반환을 해준다.

 

if문을 통해 조건식을 써준다.

🔥중요 ***

5. useEffect는 [ 경고 ] 즉, 인풋에 들어간 값이 발생하면 useEffect가 실행된다.

if 만약 경고에 들어간 값이 숫자다? false이므로 해당 alert는 실행이 되지 않는다.

if 만야 경고가 들어간  값이 문자다? 즉 isNaN 숫자가 아닌경우에 true 이니 alert이 실행된다.