본문 바로가기

Type Script/Type 적용

[TS] Form Regex 정규식 표현의 Type은? RegExp

Regex

"정규식"과 "정규표현식"은 같은 말입니다. "정규표현식"을 줄여서 "정규식"이라고 합니다.

영어로는 "Regular Expression (레귤러 익스프레션)"이라고 하는데, 이것이 너무 길기에,

Regexp

또는 더 줄여서

Regex

라고 간편히 기술합니다.


"정규표현식"이든 "Regular Expression"이든, 단어만 보고서는 무슨 뜻인지 알 수 없게 되어 있는데,

정규식이라는 것은 쉽게 말해서, "문자열을 다루는 공식"입니다. 수학에 숫자를 다루는 공식이 있듯이, 프로그래밍에서 "ABC" "가나다라" 등의 문자열을 처리할 때 사용하는 것입니다:

참고사이트


Type 적용

Form Regex 를 통해 유효성 검사를 하는 중 이것에 대한 Type을 작성해야했다.

const email = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

 

정규식의 Type은 RegExp 로 적어주면 된다.

  //InputLoginOnchangeRegex 의 경우
  export interface InputRegexInterface {
    title: string;
    type: string;
    value: string | number | undefined;
    name: string;
    placeholder: string;
    InputTitle?: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    className?: string;
    maxValue?: number;
    regexCheck: RegExp; //정규식은 RegExp 타입
    defaultText: string;
    successText: string;
    errorText: string;
  }

 

위를 참고해 'Onchange를 감지해 바로 validation 해주는 input 만들기' 코드를 작성할 수 있었다. 이에 대한 코드참고는 아래 사이트 

https://cheri.tistory.com/220

 

onChange 시에 바로바로 validation 해주는 input 만들기

보통 검증할 때 material + formik 조합으로 많이 사용하는데, 기존 formik은 무언가 버튼을 눌러서 submit 요청을 보내야 그 밑에 helperText가 뜨는 구조였다. 하지만, 내가 원하는 건 onChange 시에 바로바로

cheri.tistory.com