react-google-login
을 npm을 통해 설치하고, 컴포넌트에 삽입하면 화면상에 다음과 같은 버튼이 등장한다.
// terminal
npm install react-google-login
// GoogleButton.js
return(
<GoogleLoginBlock>
<GoogleLogin
clientId={clientId}
render={(renderProps) => (
<img
src={google}
alt="google"
onClick={renderProps.onClick}
aria-hidden="true"
/>
)}
responseType={"code"}
onSuccess={onSuccess}
onFailure={onFailure}/>
</GoogleLoginBlock>
)
img
태그의 스타일을 설정하면 디자인 수정이 가능합니다.클라이언드 내에서 환경변수를 사용하기 위해서, .env
파일의 환경변수는 반드시 앞에 REACT_APP_
을 붙여야 한다.