useCopyClipBoard

Introduction

1. 재사용성 및 모듈화:

   • 클립보드 복사 기능은 여러 컴포넌트에서 공통으로 사용될 수 있습니다. 이를 훅으로 모듈화하면 다른 컴포넌트에서 쉽게 재사용할 수 있습니다.

2. 상태 관리 및 에러 핸들링:

   • 클립보드 복사 작업은 비동기적이고 브라우저 지원 여부에 따라 실패할 수 있습니다. 훅을 사용하면 복사 작업의 성공 여부와 에러 메시지를 간편하게 상태로 관리할 수 있습니다.

3. 커스터마이징:

   • 훅을 사용하면 복사 성공 및 실패 시 표시할 메시지를 커스터마이징할 수 있습니다. 이를 통해 각 컴포넌트에서 다양한 상황에 맞게 메시지를 조절할 수 있습니다.

4. 더 나은 가독성 및 유지보수:

   • 복사 기능과 관련된 로직이 컴포넌트 내부에 흩어져 있을 경우 코드가 길어지고 가독성이 떨어질 수 있습니다. 훅을 사용하면 해당 로직을 한 곳에 모아 가독성을 향상시키고 유지보수를 쉽게 할 수 있습니다.

5. 테스트 용이성:

   • 훅을 사용하면 해당 로직에 대한 테스트가 용이해집니다. 훅을 테스트하면 클립보드 복사 작업 및 에러 핸들링에 대한 검증이 간편해집니다.

이러한 이유들로 인해 훅을 사용하여 클립보드 복사와 관련된 기능을 구현하는 것이 좋습니다. 이는 코드의 재사용성, 가독성, 유지보수성을 향상시키며, 컴포넌트 간의 일관된 동작을 보장하는 데 도움이 됩니다.

Example

import React from "react";
​
function CopyToClipboardButton() {
  const { isCopy, handleCopy, error, resetError } = useCopyClipBoard({
    successMsg: "텍스트가 성공적으로 복사되었습니다.",
    errorMsg: "복사에 실패하였습니다. 브라우저에서 클립보드 복사를 지원하는지 확인하세요.",
  });
​
  const textToCopy = "복사할 텍스트입니다.";
​
  const handleClick = async () => {
    const success = await handleCopy(textToCopy);
    if (success) {
      // 복사 성공 시 추가적인 동작을 수행할 수 있습니다.
      console.log("텍스트가 성공적으로 복사되었습니다.");
    } else {
      // 복사 실패 시 에러 메시지를 출력하거나 추가적인 처리를 할 수 있습니다.
      console.error("텍스트 복사에 실패하였습니다.", error);
    }
  };
​
  return (
    <div>
      <button onClick={handleClick}>클립보드에 복사</button>
      {isCopy && <p>클립보드에 성공적으로 복사되었습니다.</p>}
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}
​
export default CopyToClipboardButton;

useCopyClipBoard 훅을 사용하여 클립보드 복사 기능을 통합하고, 버튼 클릭 시 지정한 텍스트를 클립보드에 복사합니다. 성공 또는 실패에 따라 알림 메시지를 출력하고, 컴포넌트의 상태를 활용하여 UI를 업데이트합니다

Hook

import React from "react";
​
/**
 * 부울 토글 상태를 관리하는 사용자 정의 훅입니다.
 *
 * @param initialState - 토글의 초기 상태 (기본값은 false).
 * @returns {Array} - 현재 상태, 토글 함수, 그리고 토글 핸들러 함수를 담은 튜플을 반환합니다.
 * @example
 * // 사용 예시:
 * const [isToggled, setToggle, toggleHandler] = useToggle();
 */
type InitialStateType = boolean;
​
export default function useToggle(initialState: InitialStateType = false) {
  // 현재 토글 상태를 추적하는 상태
  const [state, toggle] = React.useState<boolean>(initialState);
​
  // 상태를 토글하는 함수
  const handleToggle = () => toggle((prev) => !prev);
​
  // 현재 상태, 토글 함수, 그리고 토글 핸들러 함수를 담은 튜플을 반환
  return [state, toggle, handleToggle] as const;
}
​

이 훅은 React 애플리케이션에서 클립보드에 텍스트를 복사하는 기능을 제공하는 커스텀 훅인 useCopyClipBoard를 구현한 것입니다. 이 훅은 특정 메시지를 커스터마이징할 수 있는 옵션을 제공하며, 복사 작업의 성공 여부 및 에러 메시지를 관리합니다.

1. ICopyClipboardProps 인터페이스:

   • successMsg: 복사가 성공했을 때 표시할 메시지를 지정하는 옵션입니다. 기본값은 "복사하였습니다."

   • errorMsg: 복사가 실패했을 때 표시할 메시지를 지정하는 옵션입니다. 기본값은 "복사가 실패하였습니다."

2. ICopyClipboardResult 인터페이스:

   • isCopy: 클립보드 복사 작업의 성공 여부를 나타내는 상태 변수입니다.

   • handleCopy: 클립보드에 텍스트를 복사하는 함수로, 비동기적으로 동작하며 성공 여부를 Promise로 반환합니다.

   • error: 복사 작업 중 발생한 에러 메시지를 저장하는 상태 변수입니다.

   • resetError: 에러 상태를 초기화하는 함수입니다.

3. useCopyClipBoard 함수:

   • useCopyClipBoard 함수는 ICopyClipboardProps 타입의 매개변수를 받아서 해당 옵션들을 기본값으로 초기화하고, ICopyClipboardResult를 반환합니다.

   • 내부에서는 React.useState를 사용하여 isCopy와 error 상태를 관리합니다.

   • handleCopy 함수는 주어진 텍스트를 클립보드에 복사하고, 성공 또는 실패에 따라 상태 및 에러를 업데이트합니다.

   • resetError 함수는 에러 상태를 초기화합니다.

4. 알림 메시지:

   • 성공적으로 복사되었을 때는 successMsg를 사용하여 알림 메시지를 띄웁니다.

   • 복사에 실패했을 때는 console.error를 통해 에러를 출력하고, errorMsg를 사용하여 에러 메시지를 설정합니다.

이 훅을 사용하면 컴포넌트에서 클립보드 복사 기능을 쉽게 통합할 수 있고, 성공 또는 실패에 대한 메시지를 커스터마이징할 수 있습니다.