[React Native] TextInput을 통해 들어온 값 검증하기(isNaN, Number.isNaN, str.includes)

const removeSpace = text => (text.replace(/\s/g, ''))
const checkValue = () => {
    if (removeSpace(editTitle) == '') {
        console.log('제목을 입력해 주세요.');
    } else if (removeSpace(editContent) == '') {
        console.log('내용을 입력해 주세요.');
    } else {
        navigation.pop();
    }
}

공백(space, tab)의 정규표현식은 '/\s/g'이다

따라서 str.replace를 사용해 공백을 전부 없애 준 뒤 남은 문자열을 확인하여 제목이나 내용에 공백만 들어간 상태라면 안내 문구가 뜨도록 작성할 수 있다

 

if (isNaN(recruit)) {
    console.log('인원은 숫자만 입력 가능합니다.');
});

숫자를 입력받을 경우, 입력받은 값이숫자가 맞는지 확인해야 하는데, NaN의 경우 비교 연산자를 통한 비교(ex. Number(num) == NaN)가 불가능하므로 반드시 isNaN(value) 또는 Number.isNaN(value)을 사용하여야 한다

 

isNaN(value) 함수를 사용하면 해당 문자열을 Number 타입으로 변환하여, NaN(Not a Number)값인지 여부를 boolean 타입으로 반환한다

Number.isNaN(value) 함수는 value 자체가 NaN 값인지 여부를 boolean 타입으로 반환하는 것이다

 

예를 들어, 'hello world'를 value로 각각 두 함수에 넣어 보면, isNaN() 함수에서는 해당 값이 Number로 변환되었을 때 NaN이므로 true를 반환하고, Number.isNaN() 함수에서는 'hello world'는 NaN이 아니므로 false를 반환한다

 

NaN을 두 함수에 넣는다고 가정하면, isNaN() 함수에서는 해당 값을 Number 타입으로 변환시키면 NaN 이므로 true를 반환하고, Number.isNaN() 함수에서는 NaN은 NaN이 맞기 때문에 true를 반환하게 된다

 

따라서 위의 케이스에서는 입력값을 Number 타입으로 변환시켰을 때 NaN인지 여부를 확인해야 하는 것이므로 isNaN 함수를 사용하였다

 

if (recruit.toString().includes('.')) {
    console.log('인원은 정수만 입력 가능합니다.');
});

인원을 입력 받는 것이었기에 실수 형태를 받으면 안 되었지만, 자바스크립트에서는 int와 float가 따로 나뉘지 않고 Number 타입으로 처리되어 따로 처리해 주는 과정이 필요해 보였다

 

입력값을 문자열로 바꾼 뒤, 해당 문자열이 '.'을 포함하고 있는지 여부를 체크하여 검증해 주었다

str.includes()의 경우 대상 문자열을 포함하고 있는지 여부만 boolean 타입으로 반환해 주고, str.indexOf()의 경우 대상 문자열의 인덱스를 반환한다(대상 문자열이 없는 경우 -1 반환)

따라서 indexOf 함수를 사용하여 체크하여도 되긴 한다