리액트: history.push를 이용하여 링크를 새 탭에서 열기
전통적인 href가 아닌 onClick 핸들러를 사용하여 리액트 애플리케이션에서 페이지 간 이동을 할 때, “새 탭에서 열기”를 선택하기 위해 가운데 버튼 클릭이나 우클릭을 할 수 없는 문제가 발생할 수 있습니다. 링크를 새 탭에서 열기를 선호하는 사용자에게는 불편할 수 있습니다.
만약 react-router-v4를 사용하고 이 문제에 직면한다면 걱정하지 마세요! history.push를 사용하는 상황에서 링크를 새 탭에서 열 수 있도록 구현할 수 있는 해결책이 몇 가지 있습니다.
해결책 1: Link 컴포넌트 사용
가장 쉬운 해결책은 react-router에서 제공하는 Link 컴포넌트를 사용하는 것입니다.
<Link to='/conference'>Conference</Link>위의 <a onClick={() => this.props.history.push('/conference/')}>Conference</a> 코드를 위의 Link 컴포넌트로 교체하면, 링크를 새 탭에서 열 수 있는 기능을 원하는 대로 구현할 수 있습니다.
해결책 2: window.open 메서드 활용
만약 Link 컴포넌트를 사용하기 원하지 않고 프로그래밍적으로 다른 페이지로 이동하고 싶다면, 특정 파라미터와 함께 window.open 메서드를 사용할 수 있습니다.
window.open('/conference', '_blank')위의 코드는 지정된 URL (/conference)을 새 탭에서 열어주는 대안적인 해결책을 제공합니다. 이 방법은 리액트 애플리케이션에서 탐색을 다루는 우선적인 방법이 아닐 수 있으므로 주의해야 합니다. 이는 브라우저 창 객체에 직접 의존하기 때문입니다.
이러한 해결책 중 하나를 구현함으로써, 리액트 애플리케이션에서 history.push를 사용하여 탐색할 때 링크를 새 탭에서 열 수 있게 할 수 있습니다.
이 글이 리액트에서 링크를 새 탭에서 열 수 있도록 하는 방법에 대해 도움이 되었기를 바랍니다. 즐거운 코딩하세요!
