자동 텍스트 링크

소개

이 랩에서는 React 를 사용하여 자동 텍스트 링크 컴포넌트를 만드는 작업을 진행합니다. 이 랩의 목적은 정규 표현식 (regular expressions) 을 사용하여 문자열 내에서 URL 을 찾고 이를 적절한 링크 요소로 변환하는 방법을 배우는 것입니다. 이 랩을 마치면 React 를 사용하여 텍스트 내의 URL 을 자동으로 링크하는 방법에 대한 이해도가 높아질 것입니다.

자동 텍스트 링크

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

이 컴포넌트는 문자열을 일반 텍스트로 렌더링하며, URL 은 적절한 링크 요소로 변환됩니다.

이를 위해, 주어진 문자열에서 URL 을 찾기 위해 정규 표현식 (regular expression) 과 함께 String.prototype.split() 및 String.prototype.match()를 사용합니다. 일치하는 URL 은 <a> 요소로 반환되며, 필요한 경우 프로토콜 접두사가 누락된 경우를 처리합니다. 문자열의 나머지 부분은 일반 텍스트로 렌더링됩니다.

다음은 코드입니다:

const AutoLink = ({ text }) => {
  const urlRegex =
    /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;

  const renderText = () => {
    return text.split(urlRegex).map((word, index) => {
      const urlMatch = word.match(urlRegex);
      if (urlMatch) {
        const url = urlMatch[0];
        return (
          <a key={index} href={url.startsWith("http") ? url : `http://${url}`}>
            {url}
          </a>
        );
      }
      return <span key={index}>{word}</span>;
    });
  };

  return <div>{renderText()}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <AutoLink text="foo bar baz http://example.org bar" />
);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 자동 텍스트 링크 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.