10/1 - 커스텀 훅

정규식 사용

이번에 회원가입 정보입력 란에 정규식을 포함해야하기 때문에 정규식에 대하여 찾아보았다.

백엔드 부분에서도 정규식을 포함시킬 수 있으나, 우선은 프론트 단에서 진행시키기로 하였다.

( 나중에 적용된 정규식 표현을 가져가서 백엔드에서 사용 가능 )

 

정규 표현식 - JavaScript | MDN (mozilla.org)

정규 표현식 - JavaScript | MDN

정규식의 기초적인 내용은 위의 MDN 문서에 잘 정리되어있다.

윗 문서의 내용을 기준으로 아랫 글에서 제시한 정규식을 해석해보려고 한다.

[javascript] 이메일 주소 검증 스크립트 정규표현식 [펌] (tistory.com)

[javascript] 이메일 주소 검증 스크립트 정규표현식 [펌]

verifyEmail = function() {
  // 이메일 검증 스크립트 작성
  var emailVal = $("#email").val();

  var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
  // 검증에 사용할 정규식 변수 regExp에 저장

  if (emailVal.match(regExp) != null) {
    alert('Good!');
  }
  else {
    alert('Error');
  }
};

MDN 문서에서는 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다고 명시한다.

주어진 예시에서는 정규식 패턴이 런타임 중에 바뀔일이 없으므로, 정규식 리터럴을 사용했음을 알 수 있다.

더 자세히 정규식 부분을 살켜보자.

var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

 

코드	내용
슬래시 ( / / )	슬래시는 정규식 리터럴의 시작과 끝을 의미한다.
^[0-9a-zA-Z]	^는 시작 부분 일치를 검사한다. 시작 부분이 [0-9a-zA-Z] 여야 통과할 수 있음.
대괄호 []	[]는 하나의 문자가 정규식에 맞는지를 검사한다.
소괄호 ()	()는 괄호 내용을 하나의 그룹으로 묶는다. $1 등으로 호출 할 수 있다.
물음표 [-_·]?	?는 수령자로, 앞 내용이 0번 또는 1번 일치하는지 검사한다. [-_·]의 내용이 0번 또는 1번 나타나야 함.
별표 *	앞의 내용이 0번 이상 나타날 수 있음을 의미한다.
일반문자 @, . 등	일반 문자가 나타나면 정확히 일치함을 의미한다. 이메일에서 @와 .은 정확히 존재해야 함.
중괄호 {n, m}	{}는 한정자로, 앞 내용이 최소 n번, 최대m번 나타날 수 있음을 의미한다. {2, 3}으로 .kr .com 등을 검사하기 위함.
달러표시 $	$는 검사하는 문자열의 끝까지 포함하여, 해당 정규식을 검사하도록 한다.
/i	/i는 정규식 플래그로, 대소문자를 구분하지 않도록 한다.

커스텀 훅

커스텀 훅은 tsx 형태로, useEffect와 같은 다른 React 훅을 응용하여 원하는 작업을 함수처럼 묶어둘 수 있다.

커스텀 훅과 일반 유틸 함수의 다른점은 다음과 같다.

1. 상태 값과 같은 React 변수를 사용하는데에 사용할 수 있다.

 React 상태 등을 생성하거나 다루는 함수는 기존 자바스크립트의 함수로는 다루지 못하므로, 커스텀 훅을 만들어 사용할 수 있다.

2. 생명 주기에 따라 작동된다.

 커스텀 훅은 useEffect와 그 속의 클린업 코드를 이용하여, 2번 이상의 호출에 대한 작업의 처리도 수행시킬 수 있다.

3. 사용 컴포넌트가 같으면 같은 변수 값을 공유한다.

 커스텀 훅은 일반 함수와 다르게, 호출마다 함수가 새로운 값을 가지지 않을 수 있다.

즉, 같은 컴포넌트에서 같은 훅을 호출했다면, 해당 훅의 상태 값 등이 같은 컴포넌트 내에서 어디에서 호출되었든 같은 값을 같도록 구성된다.

이러한 원리를 이용하여, 같은 Timer를 공유하고 독립적이고 연속적인 작업이지만 같은 내용의 체크가 필요한 디바운싱 같은 함수를 작성하는데 용이하다.

 

결론적으로 React의 커스텀 훅 함수는 React 만의 고유 개념인 상태나 생명 주기 등과 관련되어야 할 때, 사용할 수 있다.