[TIL_개발일기_210319] JavaScript 정규표현식

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다.

JavaScript 정규표현식

MDN에서는 정규표현식을 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이라고 소개한다. 

 

예를 들어, '/chat/write'에서 '/chat'만 추출하고 싶을 때 정규표현식을 사용한다. 즉 문자열에서 특정 패턴의 문자열만 추출하고 싶을 때 사용한다고 생각하면 된다.

 

정규표현식은 내가 찾고자 하는 패턴을 표현해주면 된다. 모두 외우고 있을 수 없기 때문에 그때그때 정규표현식 테스트 사이트(regexr.com/)에서 찾아보면 된다. 

 

나는 location이 '/chat/write'인 페이지에서, '목록으로'라는 버튼을 클릭했을 때 '/chat/list'로 라우팅되기를 원했기 때문에 '/chat/write'에서 '/chat'만 추출하고자 했다. 그래서 '/'로 시작하는 단어 중 첫번째 것만 추출하면 되었다. 

 

정규표현식은 '/'로 감싸야 한다. 즉, /내가 찾고자 하는 패턴/ 으로 표현해준다. 나는 현재 /와 영어 단어 조합으로 이루어진 패턴을 추출하고 싶으므로, 두 가지 조건을 모두 포함하기 위해 '()'로 묶는다. /에 해당하는 문자열을 찾아야 하기 때문에 대괄호 안에서 감싼다. [/] 이 뒤에 영어 단어(한 글자 아님)가 와야 하므로 \w+로 표현한다. 즉 합치면, /([/]\w+)/가 된다. 

 

이제 문자열에서 이 패턴과 매치하는 단어를 뽑아주면 된다. 이럴 때 match()를 사용한다. 이 때, match()는 배열을 리턴하므로 0번째 인덱스에 우리가 찾고자 하는 단어가 들어가 있다. 그래서 아래와 같이 작성해주면 된다. 

 

const location = useLocation().pathname; // ex) /chat/list 
const upperLocation = location.match(/[/]\w+/)[0]; // ex) /chat

// 클릭했을 때 /chat/write로 라우팅 되기를 원한다면 아래와 같이 표현해주면 된다.
<button onClick={() => history.push(`${upperLocation}/write`)}>글쓰기</button>