아이콘 사용

내 웹사이트의 "연락처"섹션에는 사용자를 내 소셜 미디어 페이지로 리디렉션하는 클릭 가능한 아이콘이 필요했습니다. 일반 HTML과 편리한 React 도구를 사용하여 이 작업을 수행한 방법은 다음과 같습니다.

기본 HTML로 작업한 경우 URL을 참조하기 위해 <a> 태그를 사용한다는 것을 알고 있습니다. 다음과 같이 표시됩니다.

<a href='https://www.linkedin.com/in/maasa-kono'>LinkedIn link</a>

...다음과 같이 표시됩니다.



이렇게 하면 페이지를 내 LinkedIn 프로필로 리디렉션하는 "LinkedIn 링크"라는 제목의 클릭 가능한 링크가 DOM에 생성됩니다. 그러나 새 탭에서 페이지를 열고 싶습니다(개인 취향). 그렇게 하려면 <a> 를 추가하여 targe='_blank' 태그를 업데이트해야 하므로 업데이트된 버전은 다음과 같습니다.

`<a href='https://www.linkedin.com/in/maasa-kono' target='_blank' rel='noopener noreferrer'>LinkedIn link</a>`

rel='noopener noreferrer' 가 추가되었음을 알 수 있습니다. 이것은 터미널에 표시되는 보안 위험 알림으로 인해 추가되었으며 자세한 내용은 here 에서 읽을 수 있습니다.

이제 사용자가 내 웹사이트에서 자신의 위치를 ​​잃지 않도록 새 탭에서 열리는 링크가 생겼습니다!

이제 일반 텍스트가 아닌 해당 아이콘 이미지를 클릭하고 싶습니다. 이 작업을 수행하기 위해 터미널에서 다음을 실행하여 다운로드할 수 있는 react-share 패키지를 활용했습니다.
npm install react-share --save
또는
yarn add react-share
설치가 완료되면 이제 패키지에서 사용할 수 있는 소셜 미디어 아이콘을 가져와 웹 사이트에서 사용할 수 있습니다. 먼저 파일 상단에서 사용하려는 특정 아이콘을 가져오겠습니다.

import React from 'react';
import {LinkedinIcon} from 'react-share';

이제 이 파일에서 LinkedIn 아이콘을 사용할 수 있습니다! 다음과 같이 업데이트되도록 링크 텍스트를 바꾸겠습니다.

<a href='https://www.linkedin.com/in/maasa-kono/' target="_blank" rel='noopener noreferrer'><LinkedinIcon /></a>

이제 우리 페이지는 다음과 같습니다.


react-share가 제공하는 right here에 대한 자세한 정보를 찾을 수 있습니다.

즐거운 코딩하세요!