React

리액트 문자열 찾아서 치환하기 (react-string-replace)

작성일   2020. 12. 28. 11:51  

리액트에서 워드프레스 숏코드 같은 거 만들어보려고 문자열 치환하는 방법 찾아봤습니다. 원래 자바스크립트 문법인 String.prototype.replace()를 써도 되겠지만, 저는 단순히 문자열 치환이 아니라 특정 문자열을 특정 컴포넌트로 대체하고 싶었습니다.

일반적인 replace()를 쓰면 컴포넌트로 바로 안 바뀌고 Object 문자열로 들어갑니다. 그래서 문자열을 치환해서 컴포넌트로 변화하려면 이를 배열로 짤라서 대체해야 하는 식으로 구현해야겠더라고요.

근데 찾아보니 잘 만든 라이브러리가 있길래 (럭키!) 냉큼 사용했습니다. react-string-replace를 쓰면 리액트 문자열을 간단하게 문자열을 찾아 바꿀수 있습니다. 

목차
  1. React String Replace 설치하기
  2. 리액트 문자열 찾아서 치환하기
    1. Key 추가하기
  3. 정규식 사용해서 문자열 치환하기
  4. 연속으로 치환하기

React String Replace 설치하기

npm으로 설치합니다. 

$ npm install --save react-string-replace

사용을 위해서 다음과 같이 reactStringReplace 객체를 먼저 생성해줍니다.

const reactStringReplace = require('react-string-replace');

리액트 문자열 찾아서 치환하기

그럼 이제 문자열을 찾아서 치환해봅시다. 선언해둔 reactStringReplace 객체를 이용해서 다음과 같이 실행합니다. 첫번째 인수로는 검색 대상의 전체 문자열을 넣고, 두번째 인수에는 치환할 문자열을 넣습니다. 세번째 인수에는 문자열 매칭 이후의 콜백 함수를 넣습니다. 

const reactStringReplace = require('react-string-replace');

reactStringReplace('whats your name', 'your', (match, i) => (
  <span>{match}</span>
));

위의 코드를 실행하면 'whats your name' 부분이 'whats <span>your</span> name'으로 변환됩니다. (대소문자 구분을 안하고 같이 치환합니다.)

Key 추가하기

참고로 key 값을 지정하지 않으면 콘솔에 에러 메시지가 찍히기 때문에 결과 값에 key를 추가해줍니다.

const reactStringReplace = require('react-string-replace');

reactStringReplace('whats your name', 'your', (match, i) => (
  <span key={i}>{match}</span>
));

이때 부여한 key 값은 중복되지 않은 유일한 값이어야 합니다.

정규식 사용해서 문자열 치환하기

물론 정규식을 사용도 가능합니다. 다음의 예제는 숫자 부분만 찾아서 글자색을 빨간 색으로 바꾸는 예제입니다. 숫자를 검색하는 정규식, /(\d+_/g가 인수에 추가되었습니다. 

reactStringReplace('Apt 111, phone number 5555555555.', /(\d+)/g, (match, i) => (
  <span key={i} style={{ color: 'red' }}>{match}</span>
));

연속으로 치환하기

연속으로 여러번 치환하고 싶을 때는 다음과 같이 리턴 값을 받아서 여러번 치환한 다음에 렌더링하면 됩니다.

let str = 'apple book car'; 

str = reactStringReplace(str, 'apple', (match, i) => (
  <span key={'key1-'+i} style={{ color: 'red' }}>apple</span>
));

str = reactStringReplace(str, 'book', (match, i) => (
  <span key={'key2-'+i} style={{ color: 'blue' }}>book</span>
));

str = reactStringReplace(str, 'car', (match, i) => (
  <span key={'key3-'+i} style={{ color: 'green' }}>car</span>
));

이제 변환된 str를 렌더링하면 apple은 빨간색, book은 파란색, car는 초록색으로 바뀌게 됩니다.

(참고로 위의 예제에서는 Key 값을 인덱스를 넣어서 만들었지만 중복될 가능성이 있어서 썩 좋은 코드는 아닙니다. 더 나은 방법은 리액트 고유한 Key 값 생성하기 (uuid)를 참고하세요.) 

티스토리툴바