리액트 - POST 방식으로 서버에 폼 데이터 전송하기 (Send Form Data to Server with POST)

리액트 전체 링크

 

참고

- POST로 데이터 전송 받기 (with Node JS)

 

리액트에서 id와 password를 입력해서 포스트 방식으로 Node JS에 데이터를 보내보자.

입력할 input id와 passworld 2개, 그리고 제출을 위한 input을 만든다.

method에서 post 방식을 지정하고, action에서 데이터를 전송할 서버 URL을 넣는다. (로컬 Node Server IP)

    <div className="App">
      <form id="post-form" method="post" action="http://192.168.55.120:3002">
        <input autocomplete="off" type="text" name="id"/>
        <input autocomplete="off" type="text" name="password"/>
        <input type="submit"/>
      </form>
    </div>

 

제출 버튼을 누르면 그대로 서버에 전송된다.

 

위의 HTML 태그를 js 코드로 작성하면 아래와 같다.

동적으로 form을 만들고 submit하면 다시 제거하는 방식을 사용하면, 

리액트 상에서 form을 감출 수 있다.

const submit = () => {
  const form = document.createElement("form");
  const input1 = document.createElement("input");
  const input2 = document.createElement("input");

  form.method = "post";
  form.action = "http://192.168.55.120:3002";

  input1.type = "hidden";
  input2.type = "hidden";

  input1.setAttribute("name", "id");
  input1.setAttribute("value", "blood");

  input2.name = "password";
  input2.value = "straw"; 

  form.appendChild(input1);
  form.appendChild(input2);
  
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}

 

그리고 버튼을 만들고 onClick에 submit을 연결하자.

    <div className="App">
      <button onClick={submit}>js submit</button>
      <form id="post-form" method="post" action="http://192.168.55.120:3002">
        <input autocomplete="off" type="text" name="id"/>
        <input autocomplete="off" type="text" name="password"/>
        <input type="submit"/>
      </form>
    </div>

 

이제 js submit 버튼을 누르면 { id : "blood", password : "straw" }가 전송된다.

 

아래는 실제 Node JS 서버와 연동한 결과다.

Node JS에서 입력한 id와 password를 정상적으로 받고 있다.

 

전체 코드는 다음과 같다.

function App() {
  const submit = () => {
    const form = document.createElement("form");
    const input1 = document.createElement("input");
    const input2 = document.createElement("input");

    form.method = "post";
    form.action = "http://192.168.55.120:3002";

    input1.type = "hidden";
    input2.type = "hidden";

    input1.setAttribute("name", "id");
    input1.setAttribute("value", "blood");
  
    input2.name = "password";
    input2.value = "straw"; 

    form.appendChild(input1);
    form.appendChild(input2);
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  }

  return (
    <div className="App">
      <button onClick={submit}>js submit</button>
      <form id="post-form" method="post" action="http://192.168.55.120:3002">
        <input autocomplete="off" type="text" name="id"/>
        <input autocomplete="off" type="text" name="password"/>
        <input type="submit"/>
      </form>
    </div>
  );
}

export default App;

 

참고로 Node JS의 코드는 다음과 같다.

const express = require("express");
const app = express();
const qs = require("querystring");

const cors = require("cors");
app.use(cors());

app.get("/", (req, res) => {
  console.log("get!");
});

app.post("/", (req, res) => {
  console.log("post!");

  let body = "";

  req.on("data", function (data) {
    body = body + data;
  });

  req.on("end", function() {
    let postInfo = qs.parse(body);
    console.log(postInfo);
  })

  res.send({message : "post!!"});
});

app.listen(3002, () =>
  console.log("Node.js Server is running on port 3002...")
);