React에서 외부 URL 새 창으로 열기 이슈

[3unbum]

문제 설명

로그인 페이지의 "자세히보기" 버튼을 클릭 시 회사 정보 페이지(외부 URL)로 이동하는 기능 구현 중 내부 라우팅 방식인 navigate를 사용했으나 외부 URL 이동이 작동하지 않는 문제가 발생했습니다.

문제 발생 원인

• React Router의 navigate 함수는 애플리케이션 내부 라우팅 전용으로 설계되어 있어 외부 URL 이동에는 부적합
• 외부 URL 이동 시 새 창/탭에서 열리지 않고 현재 창에서 이동하는 UX 이슈

해결 과정

1차 시도: window.location.href 사용

// Before: React Router navigate 사용 (작동하지 않음)
const handleClick = () => {
  navigate('https://www.example.com');
}

// 1차 해결: window.location.href 사용
const handleClick = () => {
  window.location.href = 'https://www.example.com';
}

• 결과: 외부 URL로 이동은 성공했으나, 현재 창에서 이동하여 사용자 경험이 좋지 않음

2차 시도: window.open() 메서드 사용

// 최종 해결: window.open() 사용
const handleClick = () => {
  window.open('https://www.example.com', '_blank');
}

• 결과: 새 창/탭에서 외부 URL이 열리도록 구현 성공

대안 솔루션

HTML 태그를 사용한 방법

const ExternalLink = () => {
  return (
    <a 
      href="https://www.example.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      자세히보기
    </a>
  );
};

보안 고려사항

• rel="noopener noreferrer" 속성 추가 이유:
  1. noopener: 새 창에서 window.opener 객체를 통한 원래 페이지 접근 방지
  2. noreferrer: 새 페이지로 리퍼러(referrer) 정보 전달 방지

장단점 비교

window.open() 방식

• 장점:
  • JavaScript로 동적 제어 가능
  • 프로그래밍 방식으로 window 객체 제어 가능
• 단점:
  • 팝업 차단기에 의해 차단될 수 있음

태그 방식

• 장점:
  • HTML 표준 방식으로 안정적
  • SEO 친화적
  • 보안 속성 적용 용이
• 단점:
  • 동적 제어가 상대적으로 제한적

결론

외부 URL을 새 창에서 여는 기능은 window.open() 메서드를 사용하여 해결했으며, 보안과 사용자 경험을 고려했을 때 HTML <a> 태그를 사용하는 방법도 좋은 대안이 될 수 있습니다.