javascript+react에서 글자 복사

해당 방법으로 복사를 구현하면 사수분께서 말씀하신 대로 윈도우의 ctrl 키를 감지하지 못하게 되어요. window의 메타 키는 windows 키입니다(윈도우 로고가 그려져있는) - window의 경우에는 ctrlKey가 true인 경우 + c 입력 - mac의 경우에는 metaKey가 true인 경우 + c 입력 - 유저가 키 매핑을 변경하여 위의 방법으로 복사가 되지 않는 엣지 케이스가 존재할 가능성도 있을 것 같아요 만약에 오직 해당 방법으로만 복사를 구현해야한다면 위와 같은 방법으로 조건문을 설정해야 하고 키보드를 사용하지 않는 모바일에서 복사할 때, 마우스 우클릭으로 복사를 할 때 처리가 어려울 것 같아요 또한 복사를 사용해야 하는 페이지나 컴포넌트의 상위 태그에 항상 onKeyDown핸들러에 함수를 주입해야할 것 같아요! 간단하게 예시 작성해드립니다! 1. 특정 태그에서의 복사 이벤트를 감지 export default function App() { // onCopy는 DOM Attribute로써 해당 태그 내에서 복사 이벤트가 발생하면 실행돼요 return ( <p onCopy={() => { // 현재 DOM에서 선택된 정보 불러오기(여러가지 정보를 담고 있어요) const selection = document.getSelection() // 내장 메소드인 toString()으로 값 출력해보기 alert(selection.toString()) }}>복사해보기</p> ); } 2. DOM에서 복사 이벤트를 감지, copy 이벤트 리스너를 사용하는 방법이에요, 해당 이벤트 리스너는 특정 태그에서만 동작하는 것이 아닌 DOM내의 텍스트에서 복사 이벤트를 감지해요 import { useEffect } from 'react' export default function Page() { // 마운트 후 document에 copy 이벤트 리스너를 등록합니다. useEffect(() => { // copy 이벤트의 콜백이에요 const copyHandler = () => { // 현재 DOM 상에서 선택된 정보를 불러옵니다. const selection = document.getSelection() // selection은 해당 값을 바로 불러올 수 있는 것이 아니라 여러가지 정보들을 담고 있어 메소드인 toString()을 통해 값을 불러옵니다 alert(selection.toString()) } // 복사 시에 copyHandler를 실행해요 document.addEventListener('copy', copyHandler) // cleanUp함수로 해당 컴포넌트가 화면에서 보여지지 않게 될 때 이벤트 리스너를 제거합니다. return () => document.removeEventListener('copy', copyHandler) },[]) return ( <div> <p>복사해보기</p> <input /> </div> ); } 복사를 감지할 요소를 제한할때는 첫 번째 방법을, 페이지 전체에서의 복사를 감지 해야한다면 두 번째 방법을 활용하시면 될 것 같습니다 :) 참고하실만한 링크 첨부드립니다! https://developer.mozilla.org/ko/docs/Web/API/Window/copy_event

사수분이 힌트를 주면서 올바른 방향을 찾아갈 수 있도록 해주시는거 보니 좋은 사수분인거 같아요. 앞서 진영님이 답변을 잘 주셨네요. 저도 답변을 좀 드리면 1. 마우스로 복사할 때는 어떻게 될까? 2. 윈도우에서는 어떻게 될까? 지금 풀려고 하는 문제 두 가지가 전부 복사에 초점이 맞춰져 있어요. 키조합으로 복사를 할 수도 있고 마우스로 복사할 수도 있죠. 각각의 경우를 생각하는 것보다는 좀 더 통합적으로 해결할 수 있는 방법을 찾으면 좋을것 같아요. html 태그에는 속성이 엄청나게 많습니다. 위에서 사용하신 onKeyDown도 있지만 onKeyUp도 있고, onChange, onClick등 이벤트 속성이 많아요. 물론 이것들을 다 알고 외우고 있을 필요는 없지만 필요한 곳에 잘 사용하는것도 중요한 것 같아요. 결론은 onCopy라는 속성이 존재합니다. 저라면 onCopy를 이용해서 해결할 것 같아요! 이건 마우스든 키보드든 어떻게 복사해도 복사가 일어나면 함수를 실행하게 됩니다. 질문자님이 주신 코드에서 onCopy로 변경하고 if 조건문을 빼면 원하는 기능을 만들 수 있을거라고 생각합니다!