230909 개발일지 TIL - React에서 URL 유효성 검사

React에서 URL 유효성 검사

유효성 검사를 위한 정규 표현식

const urlRegExp =
  /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;

1. http 또는 https로 시작할 수 있으며, 그 후에는 ://.이 오게 된다.
2. 그 다음에는 www와 점(.)이 올 수 있다.
3. 그 다음에는 길이가 2~256인 문자열이 오며, 이 문자열은 대소문자 알파벳, 숫자, @, % 등의 문자를 포함할 수 있다.
4. 이어서 점(.)과 길이가 2~6인 소문자 알파벳으로 구성된 도메인(TLD) 이름이 온다.
5. 마지막으로 -, 대소문자 알파벳 등의 문자와 /, =, ? 등의 특수문자로 구성된 경로나 쿼리 파라미터가 올 수 있다.

URL 유효성 검사 실행

if (!urlRegExp.test(urlText)) {
  alert('잘못된 URL 형식입니다.(https://test.com) 형식으로 입력해주세요');
  return;
}

만약 사용자가 "test"처럼 도메인 이름만 있는 경우나 "http://", "https://" 등 프로토콜 없이 시작하는 경우에도 '잘못된 URL 형식이다.(https://test.com) 형식으로 입력해주세요'라는 경고창이 나타난다.

이처럼 React에서 정규 표현식을 이용하여 URL의 유효성 검사를 수행할 수 있다. 사용자로부터 올바른 형식의 URL을 입력받아야 하는 경우에 활용할 수 있다.