React 클립보드 복사 구현하기

navigator.clipboard.writeText(code)

  //copy
  const [copyModal,setCopyModal]= useState(false) 
  
  const timer = ()=>{
    setCopyModal(false)
  }

  const copyString = (code:string)=>{
    navigator.clipboard.writeText(code)
    setCopyModal(true)
    setTimeout(timer,1000)
  }

<span onClick={()=>copyString(ImageData.code)}>
  <div style={{position:'relative'}}>
    {ImageData.code}
		<img src={Icon}/>
		<CopyModal style={{opacity: copyModal ? '1':'0'}} >
 			<Part></Part>
			<Part2>복사 완료!</Part2>
		</CopyModal>
	</div>
</span>

1.onClick할 때 copyString() 함수의 파라미터로 복사할 code를 전달한다.
2.navigator.clipboard.writeText(code) 전달받은 code를 복사하는 함수.
3.setCopyModal(true)를 실행해 삼항연산자를 이용한 스타일링으로 복사완료 모달을 띄운다.
4.setTimeout(timer,1000)를 실행해 1초뒤 다시 copyModal의 값을 false로 바꾼다.