URL 복사 버튼 만들기 챕터에서 react-copy-to-clipboard 오류가 발생합니다.

Q. npm i react-copy-to-clipboard 패키지 설치시 아래와 같은 오류가 발생합니다.

> npm i react-copy-to-clipboard
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: mbti-contents-platform@0.0.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0
npm error node_modules/react-copy-to-clipboard
npm error   react-copy-to-clipboard@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
...

강의 들으며 문제가 발생했고, 직접 해결한 방법을 공유합니다.

🎯 오류 원인 분석

오류 메시지를 분석하면, react-copy-to-clipboard@5.1.0 패키지가 React 19을 지원하지 않기 때문에 설치에 실패한 것입니다.

🎯 1. 오류 원인 분석

오류 메시지를 보면:

npm error Found: react@19.0.0
npm error Could not resolve dependency:
npm error peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0

📌 원인

• 프로젝트에 React 19.0.0이 설치되어 있음.

• 하지만 **react-copy-to-clipboard@5.1.0**은 React 19을 지원하지 않음 (React 15~18까지만 지원).

📌 결과

• react-copy-to-clipboard는 react@19와 호환되지 않아서 설치할 수 없음.

강사님은 18버전으로 진행, 실습 시 vite로 최신버전이 19버전으로 설치됨

Soultion

✅ react-copy-to-clipboard 대신 다른 패키지 사용 (추천)

현재 react-copy-to-clipboard는 React 19을 공식적으로 지원하지 않음.
대신 React 19에서 정상적으로 동작하는 최신 패키지를 사용하는 것이 좋음.

대체 패키지: @uidotdev/usehooks

이 패키지는 useCopyToClipboard() 훅을 제공하며, React 19에서도 사용 가능.

npm i @uidotdev/usehooks

📌 사용 예시 (useCopyToClipboard 활용)

import { useCopyToClipboard } from "@uidotdev/usehooks";

export default function CopyButton() {
  const [copiedText, copy] = useCopyToClipboard();

  return (
    <div>
      <button onClick={() => copy("Hello, World!")}>복사하기</button>
      {copiedText && <p>복사 완료: {copiedText}</p>}
    </div>
  );
}

저는 위 방식을 통해 해결하였습니다. 더 좋은 방법이 있으면 공유해주세요.

   npm i react-copy-to-clipboard --legacy-peer-deps

   npm i @uidotdev/usehooks

   import { useCopyToClipboard } from "@uidotdev/usehooks";

   export default function CopyButton() {
     const [copiedText, copy] = useCopyToClipboard();

     return (
       <div>
         <button onClick={() => copy("Hello, World!")}>복사하기</button>
         {copiedText && <p>복사 완료: {copiedText}</p>}
       </div>
     );
   }