[React] IFrame에 폼태그 전송하기.

https://www.npmjs.com/package/react-iframe-form

react-iframe-form

 

리액트에서 iframe을 쓰는 것은 어렵지 않다.

그런데, POST나 GET을 같이 전송하기는 굉장히 어려워진다.

왜냐하면 Form태그를 이용하여 submit을 구현하는데, 이때 페이지 이동을한다.

 

SPA는 한개의 페이지에서 내용만 바꿔보이는 방식므로 진행되지 않는다.

하물며 IFrame은 tag가 렌더링되면서 이미 로딩 후 전송되는 것이라.

위의 라이브러리를 이용하여 같이 보내줘야 한다.

npm i react-iframe-form

import * as React from "react"
import * as IFrame from "./src";
 
export const PaymentView: React.FunctionComponent = () => {
    const url = "https://www.portmone.com.ua/gateway/";
    const method = "post";
    const data = {
        bodyRequest: {
            order: {
                description:"191237564",
                shopOrderNumber: "SHP-00000111",
                billAmount: 100,
                billCurrency: "UAH",
            },
        },
        typeRequest: "json"
    };
    
    return <IFrame.Form name="paymentForm" config={{ url, method, data }} />;
};