[오무] 리팩토링: 외부링크 여는 버튼

KoEunseo·2023년 1월 2일
0

project

목록 보기
25/37
post-custom-banner
<Button size="long" fontsize="middle">
  <a href={url}>{name}</a>
</Button>

기존에는 버튼 내에 a tag를 넣어서 이동시키는 방법을 썼다.
페이지이동은 a가 아니라 link로 해야한다고 알고있었는데
알고보니 외부링크는 a태그를 쓰더라!!
그렇다고 이미 button 컴포넌트를 만들었는데 똑~같이 a태그를 만드는 것도 좀 별로라고 생각했다.
그래서 버튼 내에 a태그를 위치시켰는데, 이게 버튼을 누르면 이동하는 게 아니라 글자를 눌러야 이동을 하게되는... 그런 사달이 났다.

그래서 아예 버튼에 온클릭 이벤트를 넣어줌!!

  const handleOpenLink = url => {
    window.open(url, '_blank');
  };
<Button
  size="long"
  fontsize="middle"
  onClick={() => handleOpenLink(url)}
  >
  {name}
</Button>

이제 아주 잘 동작한다.
아! 추가로 이번에는 클릭시 새로운 창이 뜨게 했다.

profile
주니어 플러터 개발자의 고군분투기
post-custom-banner

0개의 댓글