이번 기술 블로그에서는 Custom Hook을 활용하여 문법 강조 기능을 추가하는 방법에 대해 알아보겠습니다. 문법 강조 기능은 사용자가 입력한 텍스트에서 특정 단어나 구문을 강조하여 시각적으로 더 명확하게 표시하는 기능입니다. 아래는 간단한 예시를 통해 설명하겠습니다.

Custom Hook 만들기

먼저, 문법 강조 기능을 구현하기 위해 Custom Hook을 만들어야 합니다. 이를 위해 다음과 같은 코드를 작성해 보겠습니다.

import { useEffect } from 'react';

const useSyntaxHighlight = (text, syntax) => {
  useEffect(() => {
    const highlightedText = text.replace(syntax, `<span class="highlight">${syntax}</span>`);
    // 강조된 텍스트를 출력 또는 저장하는 로직을 작성합니다.
  }, [text, syntax]);
};

export default useSyntaxHighlight;

위의 코드에서 useSyntaxHighlight Custom Hook은 두 개의 매개변수인 text와 syntax를 받습니다. 이 Hook은 useEffect를 통해 text에서 syntax를 찾아 강조된 텍스트로 변환하고, 해당 텍스트를 출력하거나 저장하는 로직을 수행합니다. text와 syntax의 변경 사항을 감지하기 위해 useEffect의 의존성 배열에 설정해주는 것을 잊지 마세요.

Custom Hook 사용하기

이제 Custom Hook을 사용하여 문법 강조 기능을 추가해 보겠습니다. 예를 들어, 사용자가 입력한 텍스트에서 console.log 구문을 강조하여 표시하고 싶다고 가정해 봅시다. 다음은 이를 구현하는 예시 코드입니다.

import React from 'react';
import useSyntaxHighlight from './useSyntaxHighlight';

const MyComponent = () => {
  const text = 'console.log("Hello, world!")';
  const syntax = /console\.log\(.*?\)/g;

  useSyntaxHighlight(text, syntax);

  return (
    <div>
      {/* 강조된 텍스트를 보여줄 부분 */}
      <p dangerouslySetInnerHTML={{ __html: text }}></p>
    </div>
  );
};

export default MyComponent;

위의 코드에서 useSyntaxHighlight Custom Hook을 사용하여 text에서 console.log 구문을 찾아 강조된 텍스트로 변환하고, 변환된 텍스트를 <p> 요소의 dangerouslySetInnerHTML 속성을 통해 출력합니다. 이렇게 하면 사용자의 입력 텍스트 중에서 문법을 강조하여 표시할 수 있습니다.

마치며

Custom Hook을 활용하여 문법 강조 기능을 추가하는 방법을 살펴보았습니다. 이러한 간단한 커스텀 훅을 사용하면 다양한 용도로 활용되는 문법 강조 기능을 더 쉽게 구현할 수 있습니다. 이를 바탕으로 개발자들은 더 간편하고 효율적인 코드 작성을 할 수 있을 것입니다.

#CustomHook #문법강조