본문 바로가기
Programming/PHP

React 에서 php 를 이용해 db데이터 가져오기

by Wilkyway 2020. 8. 25.

React하면 아시다시피 frontend 라이브러리라고 하는데요.. React에서 Database의 내용을 가져오려면 어떻게 해야할까요? 오늘 실습은 이 질문에서 시작했습니다. PHP, JSP, Django 등 여러가지 backend 를 이용하여 Database를 접속할 수 있을텐데요. 저는 가장 간단할 것으로 예상되는 apache, php, mysql의 조합을 이용하여 php API를 구성하는 방법으로 구성해볼까 합니다.

 

그래서 필요한 것은 간단한 php API. 아래 코드를 test.php라는 파일로 작성하여 아파치 루트 다큐먼트 경로(예: C:\xampp\htdocs)에 저장합니다. (Database는 사전에 적당한 값으로 구성하셔야합니다.)

 

test.php

<?php
    $host = 'localhost';
    $user = 'root';
    $pw = '1234';
    $dbName = 'TestDB';
    
    $conn = mysqli_connect($host, $user, $pw, $dbName);
        
    $sql = "SELECT * FROM members";
    $result = mysqli_query($conn, $sql);    
    $row = mysqli_fetch_array($result);

    $list_array = array("name" =>$row['name'],
                        "email" =>$row['email'],
                        "phone" => $row['phone']);

    $result_array = json_encode($list_array);
    
    echo $result_array;
    
?>

이 파일은 localhostTestDB에 접속하여 members테이블의 모든 row를 추출해냅니다. 그리고

결과를 $row에 저장하고, 이를 다시

배열형태로 $list_array에 할당합니다.

다시한번 json형태로 인코딩하여 $result_array에 할당합니다.

echo 함수는 이 파일의 결과값으로 $result_array를 출력하게 합니다.

 

Backend에서의 동작은 구현했습니다. 80번 포트에서요. 이번에는 개발환경인 3000 포트에서 구동하는 React App을 구성할 차례인데요, 포트가 달라지면 쿠키라던지 데이터 전달에 제한을 받게되어 원래대로라면 여러가지 다른 방법을 시도해야 한다고 합니다. 그래서 proxy라는 걸 이용하는데요. package.json파일에 아래 한줄만 추가해주면 됩니다.

"proxy": "http://127.0.0.1:80",

위 코드를 package.json 내부 적당한 위치에 아래와 같이 넣어줍니다. 그러면 localhost의 접근 시도에 대해 proxy 주소로 자동으로 넘겨주고, 추후 구성할 React 앱에서도 라우팅 부분을 간소화할 수 있습니다.

 

App.js

아래와 같이 Hello라는 텍스트와 클릭 가능한 단순 버튼을 추가하겠습니다. 버튼은 클릭시 test.php를 실행하여 DB정보를 json형태로 가져오게 합니다. 보시는 바와 같이 원래대로라면 fetch('http://127.0.0.1:80/test.php')와 같이 작성해야하나 훨씬 간소하게 구성된 것을 볼 수 있습니다.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render(){
    return (
      <div className="App">
        Hello
        <input type="button" value="get data" onClick={
          function(){
            fetch('/test.php')
            .then(function(response){
              return response.json();
            })
            .then(function(json){console.log(json);})
          }.bind(this)
        }></input>
      </div>
    );
  }
}

export default App;

 

이제 xampp도 실행하고, npm start로 리액트도 실행해 봅시다. localhost/test.php를 입력하면 DB 데이터가 json형태로 잘 출력됨을 볼 수 있습니다.

 

- 끝 -

 

'Programming > PHP' 카테고리의 다른 글

PHP와IIS 연동하기  (0) 2020.10.24

댓글3

  • 안녕하세요 2022.02.07 17:54

    react 랑 php 연결시에 프록시를 통해 api로만 연결하는방법밖에없나요 ?
    답글

    • Wilkyway 2022.02.07 19:20 신고

      사실 이 글은 연동하는 방법...이라기 보다는 CORS문제(다른 URL접근 권한 문제)를 해결하는 방법이라고 보셔야 할 것 같습니다. 인터넷에서 CORS문제 검색해보시면 많이 나올텐데요.. PHP와 연동하는 다른 방법은 사실 잘 모르겠습니다.

  • 2022.03.28 16:30

    안녕하세요~
    package.json 파일에 "proxy": "http://127.0.0.1:80",를 추가했는데도 불구하고
    실제 콘솔에서는 3000번 포트가 뜨면서 php 파일이 없다고 500 에러가 뜹니다 ㅠㅠ

    POST http://175.xxx.xx.xx:3000/php/bor.php 500 (Internal Server Error)

    프록시 설정도 해보고 프록시 미들웨어도 설치해서 setupProxy도 설정해서 넣어보고 별 짓을 다해봤지만 proxy가 먹히지 않습니다.... 무조건 3000번 포트만 읽으려 합니다.
    혹시 node나 apache 설정과 관련이 있을까요?
    답글