React와 PHP 최초의 협력

소개

이번에는 React로 간단한 폼을 만들어 PHP 쪽에서받는 프로그램을 써 보았습니다. Laravel에서는 한 적이 있습니다만, 프레임워크 없는 PHP로 한 적이 없고, 프레임워크 없는 PHP를 많이 잊어 버렸기 때문에 해 보았습니다.

텍스트를 입력하고 제출하면 텍스트가 표시되고 아무것도 입력하지 않으면 오류가 표시되는 느낌의 간단한 양식입니다.


이하를 참고로 했습니다.
참고 : Create a Contact Form With PHP and React in 3 Min

React측

package.json

{
  "name": "simple-form",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@types/axios": "^0.14.0",
    "@types/node": "^14.14.12",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "axios": "^0.21.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-hook-form": "^6.13.0",
    "react-scripts": "^4.0.1",
    "styled-components": "^5.2.1",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

↑사용한 package입니다. react-hook-form과 material-ui를 사용하고 있지만 이러한 설명은 생략합니다.

↓react-hook-form의 기사도 쓰고 있으므로 좋으면 꼭!
react-hook-form의 사용법을 해설! V6.12.0 추가

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

index.tsx에서 App.tsx에서 가져옵니다. 익숙한 형태라고 생각합니다.

import React, { useState } from "react";
import axios from "axios";
import { Button, CircularProgress, styled, TextField } from "@material-ui/core";
import { useForm } from "react-hook-form";

type FormData = {
  text: string;
};

export const App: React.FC = () => {
  const [message, setMessage] = useState("");
  const [error, setError] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm<FormData>();

  const onSubmit = async (data: FormData) => {
    try {
      const res = await axios.post("http://localhost:8080/index.php", data);
      setError(res.data.error);
      setMessage(res.data.message);
    } catch {
      setError(true);
      setMessage("通信に失敗しました。");
    }
  };

  return (
    <>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <TextField
          defaultValue=""
          margin="normal"
          variant="outlined"
          name="text"
          error={error}
          inputRef={register}
          helperText={message}
        />
        <Button
          type="submit"
          variant="contained"
          color="primary"
          disabled={isSubmitting}>
          {isSubmitting ? <CircularProgress size={24} /> : "送信"}
        </Button>
      </Form>
    </>
  );
};

const Form = styled("form")({
  display: "flex",
  flexDirection: "column",
  width: 300,
  margin: "0 auto",
});

axios에서 http://localhost:8080/index.php에 양식 값을 보내고 응답으로 error와 message가 포함 된 연관 배열을받습니다. PHP쪽의 코드를 보면 이미지가 하기 쉽다고 생각합니다.

PHP측

PHP는 Docker에서 nginx를 사용하고 http://localhost:8080에서 시작했습니다. MAMP등을 사용해도 간단하게 할 수 있다고 생각합니다.

index.php

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: Content-Type');
$rest_json = file_get_contents("php://input"); // JSONでPOSTされたデータを取り出す
$_POST = json_decode($rest_json, true); // JSON文字列をデコード

if(empty($_POST['text'])) {
    echo json_encode(
        [
           "error" => true,
           "message" => "Error: 入力してください。",
        ]
    ); 
} else {
    echo json_encode(
        [
           "error" => false,
           "message" => 'Success: 入力されたテキスト→'.$_POST['text'],
        ]
    ); 
}

Access-Control-Allow-Origin으로 다른 오리진에서 액세스 가능

Access-Control-Allow-Headers에서 사용 가능한 HTTP 헤더 설정

file_get_contents에서 JSON으로 POST 된 데이터를 검색합니다.

POST 된 데이터가 없으면 error가 true이고 오류 메시지를 반환하고 POST 된 데이터가 있으면 error가 false로 POST 된 데이터를 반환하는 느낌입니다.

끝에

여기까지 읽어 주셔서 감사합니다! 세세한 설명이 별로 되어 있지 않습니다만, 처음으로 프런트 엔드와 서버 측에서 제휴할 때의 샘플로서 봐 주시면 좋겠습니다. 다음은 데이터베이스를 사용하여 간단한 CRUD를 할 수 있도록하고 싶습니다. 문장력 별로 없기 때문에 이해하기 어려울지도 모릅니다만, 조금씩 계속하면서 올려 가고 싶습니다.