React에서 외부 링크 연결, 새 창 띄우는 함수 window.open

외부 사이트로 이동을 하는 여러 버튼들이 있습니다. html 문서에서 서로 다른 페이지로 이동하게 하는 버튼은 필수적인 요소라고 볼 수 있습니다. 그래서 외부 사이트를 여는 여러 함수들도 존재합니다. html의 a 태그도 외부 링크를 할 수 있는 하나의 방법입니다.

 

이번에 제가 사용한 함수는 window.open인데, 자바스크립트의 내장함수입니다.

 

window.open(url, target, features);

 

url에는 열고자 하는 웹 페이지의 URL을 넣고, target은 새롭게 여는 창을 어디에 열 것인지를 지정하는 속성입니다. _blank는 새 탭이나 새 창에서 열고, _self는 같은 창에서 열고, _parent는 부모 프레임, _top은 최상위 프레임에서 여는 속성입니다. 그리고 마지막으로 features에서 새롭게 여는 창의 속성을 결정하면 됩니다.

 

<div className={styles.snsButtonContainer}>
<img
  className={styles.snsButton}
  src={'/assets/banner/naver.png'}
  onClick={() => {
    window.open(
      'https://blog.naver.com/',
      '_blank',
      'noopener, noreferrer',
    );
  }}
/>
<img className={styles.snsButton} src={'/assets/banner/insta.png'} />
<img className={styles.snsButton} src={'/assets/banner/facebook.png'} />
</div>

 

리액트에서 이렇게 위의 icon의 Img 태그에 onClick 함수 안에 window.open 함수를 사용해주면, 해당 아이콘을 클릭하면 지정해둔 url로 이동하게 됩니다.

 

  <div className={styles.snsButtonContainer}>
    <a
      href={'https://blog.naver.com/dream_rani'}
      target='_blank'
      rel='noopener noreferrer'
    >
      <img className={styles.snsButton} src={'/assets/banner/naver.png'} />
    </a>
    <img className={styles.snsButton} src={'/assets/banner/insta.png'} />
    <img className={styles.snsButton} src={'/assets/banner/facebook.png'} />
  </div>

 

이렇게 a 태그를 이용해서 사용해도 됩니다. 물론 a태그를 사용하는 것이 조금 더 편할수도 있습니다. 개발하면서 느끼는 거지만 정말 많은 방법이 있고, 하나하나 선택을 했을 때 같은 결과가 나올수도 나중에 큰 후회를 몰고올수도 있다는 것이 참 재미있는 포인트인 것 같습니다.