[React] 새창 Pop up 열기

리액트에서 새창팝업 띄우는 방법은 두가지가 있다.

1. <Link>

import React, { useState } from 'react';
import { Link } from "react-router-dom"

const ButtonPreview = (props) => {
    return (
        <button type="button" className="btn">
            <Link to='/preview' target="_blank">
                미리보기
            </Link>
        </button>
    );
};

export default ButtonPreview;

Link태그 사용하여 타겟을 _blank를 주는방식

이 경우 라우터에 /preview 경로 파일을 연결해준다.

js파일만 세팅해주면 간단하게 사용가능하지만

우리는 대부분 리액트를 사용할때,

컴포넌트들을 화면에서 분리하고 그 컴포넌트만 랜더링 하기때문에 디폴트 레이아웃이 잡혀있을것이다.

나의 경우 새창은 디폴트레이아웃과 상관없는 화면음으로 다른 방법을 사용했다.

2. window.open()

import React, { useState } from 'react';

const ButtonPreview = (props) => {
    let {param } = props

    const onPopup = () => {
        const url = 'preview '
        window.open(url, "_blank", "noopener, noreferrer");
    }
    return (
        <div>
            <button type="button" className="btn-circle" onClick={onPopup}>미리보기</button>
        </div>
    );
};

export default ButtonPreview;

자바스크립트 기본 함수인  window.open()를 사용하여 새창을 띄워줄수 있다.