[AWS] 카톡분석 프로젝트-10 / React 링크 복사 버튼, 팝업

 

AWS Lambda 를 이용한 Serverless 서비스 제작 중 현재 React를 이용한 FE쪽에 집중하고 있다.

 

이번엔 간단한 링크복사 버튼과 그에 대한 팝업을 만들어 보려 한다.

 

---

 

리액트 시작 포스팅은 아래에서부터 이어진다

[AWS] Lambda 프로젝트-4 / React 연동 파일 업로드

 

---

 

링크 복사 버튼 구현하기

- react-copy-to-clipboard

 

1. 라이브러리 설치

npm install --save react react-copy-to-clipboard

 

2. 사용방법

 

- 링크 복사 버튼 자체는 아래 코드와 같이 간단히 구현할 수 있다.

import { CopyToClipboard } from 'react-copy-to-clipboard'

render() {
  const url = window.location.href; // url 복사

  <CopyToClipboard text={url}>
    <button>Copy URL to the clipboard</button>
  </CopyToClipboard>
}

 

---

 

링크복사 -> 팝업 구현하기

- 링크 복사 버튼을 누르면 팝업이 뜨는 간단한 동작을 구현해보자

---

 

1. popup.js

 

- src 하위에 components 폴더를 하나 더 만들어 생성

- 팝업 창을 만들어준다

- props의 trigger 상태를 보고 팝업창을 열고 close 버튼을 통해 팝업을 닫는 동작을 구현한다.

 

import React from 'react'
import './Popup.css'

function Popup(props){
    return(props.trigger)?(
        <div className='popup'>
            <div className='popup-inner'>
                <button className="close-btn" onClick={()=>props.setTrigger(false)}
                    >close
                </button>
                {props.children}
            </div>
        </div>
    ) : "";
}

export default Popup

 

---

 

2. popup.css

 

- 최소한의 디자인을 해주자

.popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-color: rgba(0,0,0,0.5);
    display:flex;
    justify-content:center;
    align-items:center;

}

.popup-inner{
    position:relative;
    padding:32px;
    width:20%;
    max-width:640px;
    background-color:#fff ;
    border-radius:20px;

}

.popup-inner .close-btn{
    position:absolute;
    top:16px;
    right:16px;
    border-radius:5px;
}

 

---

 

3. App.js (또는 링크복사 동작이 있는 곳)

 

- 위에서 배웠던 CopyToClipboard 뒤에 Popup function을 달아준다.

- trigger에 의해 팝업을 출력하고 close를 누르면 팝업을 닫는 간단한 동작을 수행한다.

 

import Popup from './components/Popup'

const Indiresult = () => {
  const currentUrl = window.location.href;
  return (
    <div className='container'>
    
      //setButtonPopup trigger 를 true로 바꿔준다. 팝업 출력하겠다는것
      <CopyToClipboard text={currentUrl}>
        <button type="submit" class="btn" onClick={()=>setButtonPopup(true)}>URL복사</button>
      </CopyToClipboard>
      
      <Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
        <h3>링크 복사 완료</h3>
        <p>My Link</p>
      </Popup>
    </div>
  );
};

---

 

이번엔 링크복사 방법과 링크복사후 팝업을 출력하는 방법을 배워봤다

 

 

끝!