리액트 현재 페이지 주소 복사!

이번 프로젝트에서 사용할 URL 복사 기능을 구현해 볼 것입니다. 우선 '공유' 버튼을 눌렀을 때 띄울 모달창을 먼저 만들었습니다.

 

 

 

 

'주소' 부분에 해당 페이지의 URL이 출력되게 하고, '복사'버튼을 눌렀을 때 URL이 복사되게 해야 합니다. 이를 위해서는 우선 해당페이지의 URL을 먼저 알아와야 합니다. 이를 위해 useLocation을 사용합니다.

 

 

 

 

useLocation()은 현재 경로와 관련된 정보를 담고 있는 객체를 반합니다. 이 친구가 담고 있는 내용 중 pathname은 현재 url의 경로 부분을 나타내는 문자열입니다.

 

 

 

 

현재 로컬 주소를 baseUrl 변수로 저장하고 location 훅에서 가져온 경로를 pathUrl 변수로 저장합니다. 이후 출력해 보면 현재 페이지의 주소가 잘 나오는 것을 확인할 수 있습니다.

 

 

 

 

위의 값을 모달로 넘겨주면 URL은 끝입니다. 이제 '복사' 버튼을 눌렀을 때 해당 url이 복사되면 됩니다. 이를 위해 클립보드에 접근할 수 있는 ClipBoard API를 사용할 것입니다.

 

 

 

 

ClipBoard API의 메서드로는 write, writeText, read, readText가 있으며, 메서드들은 Promise를 반환합니다. 지금 필요한 기능은 클립보드의 저장 기능이므로, writeText 메서드를 사용할 것입니다.

비동기로 메서드가 실행되기에 async, await를 사용했으며, try, catch를 통해 에러 핸들링을 했습니다. clipUrl 함수가 실행되면 writeText 메서드에 인수로 전달되는 값을 복사합니다.

 

 

 

 

복사 버튼의 onClick 핸들러로 clipUrl 함수를 넣어주고, 인수로 현재 주소를 저장한 currentUrl 변수를 전달해 주면 끝입니다.

 

 

 

 

현재 주소가 잘 복사되는 것을 확인할 수 있습니다.

 

 

 

 

다른 페이지에서도 잘 작동합니다.

 

 

 

 

clipboard API는 보안 이슈로 로컬 또는 https 환경에서만 사용가능하다고 합니다!.!