[React] isNaN() 정리

발생한 문제

Spring에서 별점 평균을 불러와 별점이 없을 경우 0을 반환하고
별점이 있을 경우 반올림하여 표시하려고 했다.

그러나

const loadAvgstar =(num)=>{ 
        axios.get('/matzip/avgStar/'+num)
        .then((resp)=>{ 
            console.log(resp.data)
            if(resp.data === null){
                return 0;
            // 소수 첫째자리에서 반올림   
            }else{
                return setAvgstar(resp.data.toFixed(1));
            }
        })
      }

이런식으로 resp.data가 null이라면 0을 return하라고 하니 오류가 났다.

문제를 확인하고자 resp.data를 콘솔에 찍어보니

NaN ???

null은 자주 봤어도 NaN은 처음 보는 결과라 당황했다.

해결

아래 코드와 같이 isNaN(resp.data)를 해주니 정상적으로 작동했다.

const loadAvgstar =(num)=>{ 
        axios.get('/matzip/avgStar/'+num)
        .then((resp)=>{ 
            console.log(resp.data)
            // resp.data가 NaN이면 0을 return 
            if(isNaN(resp.data)){
                return 0;
            // 소수 첫째자리에서 반올림   
            }else{
                return setAvgstar(resp.data.toFixed(1));
            }
        })
      }