TIL49-01 리액트: 링크 새 창에서 띄우기

a태그 활용

  <div>
    <a href={url} target="_blank" rel="noopener noreferrer">
      {url}
    </a>
  </div>

• 위 코드에서 사용한 a 태그는 HTML에서 하이퍼링크를 만드는 태그입니다. href 속성에는 링크 주소를, target 속성에는 링크를 열 창을 지정하며, rel 속성에는 보안 관련 설정을 지정합니다.
• 위 코드에서는 _blank 값을 target 속성에 지정하여 새 창에서 링크를 열 수 있도록 했고, noopener noreferrer 값을 rel 속성에 지정하여 보안에 관련된 설정을 추가했습니다.

noopener noreferrer

• noopener noreferrer는 보안 관련된 설정입니다. noopener은 보안 상 문제가 될 수 있는 창간 연결 보안 문제를 해결하기 위해 사용됩니다. 기본적으로 하이퍼링크를 통해 다른 사이트로 이동하면 새 창이 열리는데, 이때 window.opener라는 창 간 연결 객체가 새 창과 기존 창 사이에서 생성됩니다. 이 객체를 통해 새 창에서 기존 창의 정보를 읽어들일 수 있으며, 이를 악용하면 보안에 문제가 생길 수 있습니다.

• 하지만 noopener를 사용하면 이 문제를 해결할 수 있습니다. noopener를 사용하면 새 창에서 window.opener를 통한 창 간 연결이 차단되기 때문에 보안에 더 안전해집니다.

• 또한, noreferrer는 사용자가 어떤 링크를 클릭하여 현재 페이지를 떠날 때, 현재 페이지와 관련된 정보가 클릭한 링크의 페이지에 전송되지 않도록 하는 보안 관련 설정입니다. 이를 사용하면 사용자의 개인 정보가 유출되는 것을 막을 수 있습니다.

• 따라서 noopener noreferrer를 rel 속성에 추가함으로써 보안에 관련된 설정을 추가하게 됩니다.

Link to의 활용

<Link
to={url}
target="_blank"
rel="noopener noreferrer"
>
{url}
</Link>

• 리액트에서 사용하 는 Link to를 활용한 코드입니다.