이번 포스트에서는 React에서 Custom Hook을 사용하여 텍스트 마스킹 기능을 구현하는 방법에 대해 알아보겠습니다. 텍스트 마스킹은 사용자의 개인정보를 보호하거나 민감한 정보를 감추는 데 사용됩니다.

기능 요구사항

1. 마스킹할 텍스트를 입력 받아 화면에 표시합니다.
2. 사용자가 마우스를 해당 텍스트 위로 이동하면 마스킹된 텍스트가 원래 텍스트로 나타납니다.
3. 사용자가 마우스를 해당 텍스트에서 벗어나면 다시 마스킹된 텍스트로 변경됩니다.

Custom Hook 만들기

먼저, useTextMasking이라는 Custom Hook을 만들어보겠습니다. 이 Hook은 다음과 같은 기능을 제공합니다.

import { useState } from 'react';

export const useTextMasking = (initialText) => {
  const [text, setText] = useState(initialText);
  const [isMasked, setIsMasked] = useState(true);

  const handleMouseEnter = () => {
    setIsMasked(false);
  };

  const handleMouseLeave = () => {
    setIsMasked(true);
  };

  return {
    text: isMasked ? '********' : text,
    handleMouseEnter,
    handleMouseLeave,
  };
};

위 코드에서는 useState 훅을 사용하여 state를 관리하고, handleMouseEnter와 handleMouseLeave 함수를 정의하여 마우스 이벤트에 대한 처리를 구현합니다. 마스킹되었을 때의 텍스트는 “****“로 설정되며, 사용자의 마우스 동작에 따라 마스킹 여부를 변경합니다.

사용하기

이제 위에서 만든 useTextMasking 훅을 사용하여 텍스트 마스킹 기능을 구현해봅시다.

import React from 'react';
import { useTextMasking } from './useTextMasking';

const TextMasking = () => {
  const { text, handleMouseEnter, handleMouseLeave } = useTextMasking('This is sensitive information');

  return (
    <div>
      <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        {text}
      </span>
    </div>
  );
};

export default TextMasking;

위 코드에서는 useTextMasking 훅에서 반환된 text, handleMouseEnter, handleMouseLeave를 활용하여 마스킹된 텍스트를 표시하고 마우스 이벤트를 처리합니다.

마무리

React의 Custom Hook을 활용하여 텍스트 마스킹 기능을 구현하는 방법에 대해 알아보았습니다. Custom Hook을 사용하면 코드의 재사용성을 높일 수 있으며, 이러한 기능을 구현하는 데 유용합니다.

더 많은 Custom Hook에 대해서는 React 공식 문서를 참조해보시길 추천드립니다.

#React #CustomHook