[React]새로운 탭 띄우는 방법

새로운 탭 띄우는 방법

이번 포스팅은 React에서 외부 링크를 띄우는 방법을 소개합니다.

---

a 태그를 활용하여 새로운 탭 띄우기

첫 번째 방법으로 HTML의 기본 요소인 <a> 태그를 사용할 수 있습니다. <a> 태그의 href 속성에 외부 링크를 설정하고 target 속성에는 "_brank"를 설정합니다. 마지막으로 rel 속성에는 "noopener noreferrer"를 설정합니다.

export default function App() {
  return (
    <div className="App">
      <a href="https://www.naver.com/"
         target="_blank"
         rel="noopener noreferrer">
      Naver 이동</a>
    </div>
  );
}

target 속성을 "_blank"로 설정하면 외부 링크가 새로운 탭에서 활성화됩니다.

 

rel 속성의 noopener는 현재 활성화된 페이지와 새로운 탭에서 활성화되는 페이지를 별개의 프로세스로 취급합니다. noreferrer는 현재 활성화된 페이지의 정보를 새로운 탭에서 활성화되는 페이지에 전달하지 않습니다.

---

onClick 이벤트에서 새로운 탭 띄우기

두 번째 방법으로 onClick 이벤트 핸들러 함수에서 window 객체의 open() 메서드를 사용하여 외부 링크를 새로운 탭에서 띄울 수 있습니다.

 

window.open() 메서드에 세 개의 매개변수를 순서대로 전달합니다.

 

url

- 새로운 페이지에서 띄우려는 외부 링크입니다.

 

target

- 외부 링크가 로드되는 컨텍스트의 이름을 작성합니다.

 

windowFeatures

- 페이지 기능을 쉼표로 구분합니다.

 

아래 예제는 <button> 태그의 onClick 이벤트 핸들러 함수를 사용하여 외부 링크를 새로운 탭에서 띄웁니다.

export default function App() {
  const handleOpenNewTab = (url) => {
    window.open(url, "_blank", "noopener, noreferrer");
  };

  return (
    <div className="App">
      <button onClick={() => handleOpenNewTab("https://www.naver.com/")}>
        Naver 이동
      </button>
    </div>
  );
}