TIL | [React] replace할게요~ 근데 무슨말씀이신지..?

레이나·2025년 1월 5일

Today I Learned

목록 보기
24/47
post-thumbnail

[250105 일요일]

알고리즘 문제는 github에 잔디를 심으며 꾸준하게 풀고 있어서, 블로그에 게시할 일이 많지 않을 것이라 생각했지만, 오늘의 알고리즘과 예제에서 사용하는 두 함수가 모두 replace여서 공부하며 알게된 부분들을 기록하려고 한다.

🛸 문제부터 풀어볼까?

핸드폰번호 가리기


1) 입력된 전화번호의 자릿수가 동일하지 않다.
2) 맨 뒤 4자리를 제외하고 나머지 자릿수만큼 *모양으로 치환.

✔︎ 가장 먼저 생각난 풀이는 for반복문과 replace를 이용하여 치환하는 방법.

입력된 문자의 뒤 4자리전 까지 반복해서 *로 치환해 주는 과정이다.

function solution(phone_number) {
  for (let i = 0; i < phone_number.length - 4; i++) {
    phone_number = phone_number.replace(phone_number[i], "*");
  }
  return phone_number;
}

✔︎ 두번 째는 replace를 모를경우, for와 if를 사용하여 풀기

좋은 코드인지 뭔지는 알수 없으나, 함수들을 잘 모를 때 (지금도) 비슷한 유형이면 다 이런 방법으로 풀었다.
여기선 if가 한번이면 되기에 삼항연산자로 표기하였다.

function solution(phone_number) {
  let answer = "";
  for (let i = 0; i < phone_number.length; i++) {
    i < phone_number.length - 4 ? (answer += "*") : (answer += phone_number[i]);
  }
  return answer;
}

✔︎ 정규 표현식으로 replace만 활용하기

replace 사용방법을 찾다보니 '정규 표현식'이라는 것이 있더라, 그래서 찾아보니...무슨말씀이세요??
방탈출을 위해서 힌트를 모아 모아 해석하는 느낌이었다.

function solution(phone_number) {
  return phone_number.replace(/\d(?=\d{4})/g, "*");
}

찾을 문자열 조건..저거 뭔데? (해석은 맨 아래에..)


🛸 .replace()

string.replace(searchValue, newValue)

  • 원래의 문자열을 변경하지 않고 조건에 맞는 부분에 대해서만 치환된 문자열을 리턴
  • 제공된 문자열에서 첫 번째로 찾은 문자열만 치환
  • 영어 대.소문자 구분

✔︎ 첫 번째로 찾은 문자열만 치환

'coffee'라는 단어가 2번 등장 했지만, 첫 번 째로 찾은 'coffee'만 'tea'로 치환된 것이 확인됐다.

✔︎ 대,소문자 구분

'Coffee shop' 을 대문자로 변경하고, 대문자 'Coffee'를 찾는 문자열 조건으로 변경하니, 대문자로 변경된 'Coffee'만을 'tea'로 치환된 것이 확인됐다.

✔︎ 대,소문자 구분 없이 특정 문자열을 찾아서 치환

여기서 부터는 정규 표현식을 사용해야한다.

정규식으로 찾으려는 문자열을 '/'로 감싸서 파라미터로 들어가는 값이 정규식임을 알려줌.
감싼 '/'뒤에 'i'라는 플래그를 붙여 대소문자를 구문하지 말라고 정의해준다.(ignore case)

const newStr = str.replace(/coffee/i, "tea");

이렇게 해도 처음 찾은 1개의 문자열만 치환하는 것을 볼 수 있다.

✔︎ 특정 문자열을 모두 찾아서 치환

마찬가지로 1개가 아닌 주어진 문자열 내에서 모두 찾아서 치환할 경우에도 정규 표현식으로 찾을 문자열을 표현한다.

정규식으로 찾으려는 문자열을 '/'로 감싸서 파라미터로 들어가는 값이 정규식임을 알려줌.
감싼'/'뒤에 'g'라는 플래그를 붙여 'global match' 전역검색하여 모두 찾으라고 정의해준다.

const newStr = str.replace(/coffee/g, "tea");

이때도 대소문자는 구분을 하기 때문에 소문자로된 'coffee'만 찾아서 'tea'로 치환된 것이 보인다.

✔︎ 대소문자 구분 없이 모두 찾아서 치환

위 내용을 조합해서 정규표현식으로 찾을 문자열의 조건을 주면 원하는 문자열로 치환된 것을 확인할 수 있다.

str.replace(/coffee/gi, "tea");

여기서 슬래시 뒤 'gi'로 쓰던 'ig'로 쓰던 상관 없이 똑같이 치환된것을 확인 했다.

.replace() MDN 공식 문서를 찾아보면 더 많은 설명들이 있고 정규 표현식 부분도 있다.


⁉️ 그래서 나는 이 코드를 해석하고 싶었다!!

function solution(phone_number) {
  return phone_number.replace(/\d(?=\d{4})/g, "*");
}

/\d(?=\d{4})/g 여기서 2가지는 정확하게 알수 있다.
'/'로 감싸고 있으니 정규 표현식이고, 그 표현식 뒤에 'g'를 붙였으니 phone_number문자열에서 모두 찾으라는것.

\d(?=\d{4})이곳을 보면

\d : 숫자와 일치하는지 확인하라는 것

(?=) : 앞쪽 일치

{n} : n은 음이 아닌 정수이고, n개.

=> 받은 문자열 전체에서 4개의 숫자 앞에 있는 문자열을 찾는데 숫자인지 확인해라.

정확하게 해석했는지는 모르겠다만... 결과는 맞게 나왔다.

공식문서를 찾아보다가도 명확하지가 않아서 챗gpt에 물어봤는데.. 이녀석은 해석은 비슷하나 직접 출력해서 확인 한 결과물과 다른 출력을 말하고 있다...?
내일 수업 후 다시한번 확인해보겠다!!

profile
one setp

0개의 댓글