React useEffect example (php REST API)

json 데이터 구조

{
  "result": [
    {
      "idx": 1,
      "userNM": "개발자",
      "mobileNO": "01000010001",
      "telNO": "0234560001",
      "photo": "1.jpg"
    },
    {
      "idx": 2,
      "userNM": "이정은",
      "mobileNO": "01001230001",
      "telNO": "",
      "photo": "2.jpg"
    },
    {
      "idx": 3,
      "userNM": "김홍길",
      "mobileNO": "01001230002",
      "telNO": "",
      "photo": ""
    },
    {
      "idx": 4,
      "userNM": "최신형",
      "mobileNO": "01001230003",
      "telNO": "",
      "photo": "4.jpg"
    },
  ]
}

 

React useEffect 함수

const initData = {
    result: {
        idx: 0,
        userNM: '',
        mobileNO: '',
        telNO: '',
        photo: ''
   }
}
const [arrayData, setArrayData] = useState(initData);
 
useEffect( () => {
    const params = {
        idx: 1
    }
    axios.post('http://localhost/reactSample/getContact.php', params)
        .then(res => {
            //console.log(res);
            if (res.status === 200) {
                // console.log(res.data.result);
                setArrayData(res.data.result);
            }
        })
        .catch(error => {
            console.log(error.response)
        });
}, []);
 

구글링을 하면 axios post 방식으로 params 를 넘기는 방식이 다양하게 나오는데 테스트를 해보니 안되더라.

위와 같이 하면 된다.

PHP 에서는 변수를 $data['idx'] 로 인식되더라.

유투브 강의 자료 따라서 할 때 변수를 잘못 인식할 수도 있으니 반드시 테스트가 필요하다.

 

 

npm install 및 import

//npm install --save axios
 
import {useEffect, useState} from "react";
import axios from "axios";

 

 

실전형 REST API 예제

- React 에서 전달받은 데이터를 처리하는 PHP 파일

<?php
//header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 3600");
//header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
 
$data = json_decode(file_get_contents("php://input"),true);
 
require_once 'phpclass/config.php';
require_once 'phpclass/dbconnect.php';
require_once 'phpclass/loginClass.php';
$c = new LoginClass();
 
//키워드 확인
if(!isset($data['keyword']) || empty($data['keyword'])){
    $result = array(
        'status' => "fail",
        'message' => "no keyword",
        'addrinfo' => null
    );
    echo json_encode($result);
    exit;
}
 
$keyword=$data['keyword'];
//키워드 일치 확인
if(strcmp($keyword,$mykey)<>0){
    $result = array(
        'status' => "keyfail",
        'message' => "서버와 단말의 KEY가 일치하지 않습니다.",
        'addrinfo' => null
    );
    echo json_encode($result);
    exit;
}
 
 
$column ="idx,userNM,mobileNO,telNO,photo";
$sql = "select idx,userNM,mobileNO,telNO,photo from Person";
if(!empty($search)) {
    $where = "userNM LIKE '%".$search."%' or mobileNO LIKE '%".$search."%'";
} else {
    $where = "";
}
 
if(strlen($where) > 0){
    $sql .= " where ".$where;
}
 
$R = array(); // 결과 담을 변수 생성
$result = $c->putDbArray($sql);
while($row = $result->fetch_assoc()) {
    $path = "./photos/".$row['photo'];
    if(!file_exists($path)) {
        $row['photo'] = "";
    } else {
        $row['photo'];
    }
    array_push($R, $row);
}
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: application/json; charset=UTF-8");
 
$status = "success";
$message = "";
$addrinfo = $R; // 전체 ArrayList 데이터
 
$result = array(
    'status' => $status,
    'message' => $message,
    'addrinfo' => $addrinfo
);
echo json_encode($result);//배열-문자열등을 json형식의 '문자열'로 변환
?>
 

 

위와 같은 JSON 데이터를 처리하기 위한 React POST 전송 코드 구현 사항

import {useEffect, useState} from "react";
import axios from "axios";
import moment from 'moment';
import * as config from './config';
 
const ListData = () => {
    const today = moment().format('YYYYMMDD');
    const initData = {
        status:'',
        message:'',
        addrinfo: {
            idx: 0,
            userNM: '',
            mobileNO: '',
            telNO: '',
            photo: ''
       }
    }
    const [arrayData, setArrayData] = useState(initData);
 
    useEffect( () => {
        const params = {
            keyword: config.URLKEY + today,
        }
        axios.post('http://localhost/reactSample/getContact.php', params)
            .then(res => {
                //console.log(res);
                if (res.status === 200 && res.data.status === 'success') {
                    console.log(res.data.addrinfo);
                    setArrayData(res.data.addrinfo);
                } else {
                    console.log(res.data.message);
                }
            })
            .catch(error => {
                console.log(error.response)
            });
    }, []);
 
    // 화면 UI 구성은 생략
    return (
        <div className="container h-100 mt-5">
        </div>
    )
}
 
export default ListData;

 

모듈 설치 사항

npm install --save axios
npm install moment --save

 

 

주의사항

Android APP 과 PHP 간에 주고받은 PHP 파일 형식과 React 대응 PHP 파일 형식이 다르다.

Android/jQuery POST 변수 인식 방법은

if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST"){

}

로 하면 GET 방식으로 실행하면 내용을 확인할 수가 없다.

그런데 React 대응 PHP 코드는 GET 방식으로도 실행이 된다.

그러므로 keyword 또는 session 처리를 잘 구현해서 PHP 코드를 작성해야 할 것 같다.

 

ListData.js

0.00MB