useCopyClipBoard
Introduction
재사용성 및 모듈화:
클립보드 복사 기능은 여러 컴포넌트에서 공통으로 사용될 수 있습니다. 이를 훅으로 모듈화하면 다른 컴포넌트에서 쉽게 재사용할 수 있습니다.
상태 관리 및 에러 핸들링:
클립보드 복사 작업은 비동기적이고 브라우저 지원 여부에 따라 실패할 수 있습니다. 훅을 사용하면 복사 작업의 성공 여부와 에러 메시지를 간편하게 상태로 관리할 수 있습니다.
커스터마이징:
훅을 사용하면 복사 성공 및 실패 시 표시할 메시지를 커스터마이징할 수 있습니다. 이를 통해 각 컴포넌트에서 다양한 상황에 맞게 메시지를 조절할 수 있습니다.
더 나은 가독성 및 유지보수:
복사 기능과 관련된 로직이 컴포넌트 내부에 흩어져 있을 경우 코드가 길어지고 가독성이 떨어질 수 있습니다. 훅을 사용하면 해당 로직을 한 곳에 모아 가독성을 향상시키고 유지보수를 쉽게 할 수 있습니다.
테스트 용이성:
훅을 사용하면 해당 로직에 대한 테스트가 용이해집니다. 훅을 테스트하면 클립보드 복사 작업 및 에러 핸들링에 대한 검증이 간편해집니다.
이러한 이유들로 인해 훅을 사용하여 클립보드 복사와 관련된 기능을 구현하는 것이 좋습니다. 이는 코드의 재사용성, 가독성, 유지보수성을 향상시키며, 컴포넌트 간의 일관된 동작을 보장하는 데 도움이 됩니다.
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를 구현한 것입니다. 이 훅은 특정 메시지를 커스터마이징할 수 있는 옵션을 제공하며, 복사 작업의 성공 여부 및 에러 메시지를 관리합니다.
ICopyClipboardProps 인터페이스:
successMsg: 복사가 성공했을 때 표시할 메시지를 지정하는 옵션입니다. 기본값은 "복사하였습니다."errorMsg: 복사가 실패했을 때 표시할 메시지를 지정하는 옵션입니다. 기본값은 "복사가 실패하였습니다."
ICopyClipboardResult 인터페이스:
isCopy: 클립보드 복사 작업의 성공 여부를 나타내는 상태 변수입니다.handleCopy: 클립보드에 텍스트를 복사하는 함수로, 비동기적으로 동작하며 성공 여부를 Promise로 반환합니다.error: 복사 작업 중 발생한 에러 메시지를 저장하는 상태 변수입니다.resetError: 에러 상태를 초기화하는 함수입니다.
useCopyClipBoard 함수:
useCopyClipBoard함수는ICopyClipboardProps타입의 매개변수를 받아서 해당 옵션들을 기본값으로 초기화하고,ICopyClipboardResult를 반환합니다.내부에서는
React.useState를 사용하여isCopy와error상태를 관리합니다.handleCopy함수는 주어진 텍스트를 클립보드에 복사하고, 성공 또는 실패에 따라 상태 및 에러를 업데이트합니다.resetError함수는 에러 상태를 초기화합니다.
알림 메시지:
성공적으로 복사되었을 때는
successMsg를 사용하여 알림 메시지를 띄웁니다.복사에 실패했을 때는
console.error를 통해 에러를 출력하고,errorMsg를 사용하여 에러 메시지를 설정합니다.
이 훅을 사용하면 컴포넌트에서 클립보드 복사 기능을 쉽게 통합할 수 있고, 성공 또는 실패에 대한 메시지를 커스터마이징할 수 있습니다.
Last updated