React + ASP.Net(BackEnd)로 사용하기

BackEnd 서버 환경

DB: MSSQL

IIS Web 서버 사용

Language : Asp.net

 

Server 소스

@{

    var db = Database.Open("연결문자열");

  // json 형식으로 반환

    var JsonQuery = "SELECT Top 10 Prod_Nm, Prod_Nmx, Unit_Price FROM TB_ML011 For Json Auto";

    var json = db.QueryValue(JsonQuery);

}

@Html.Raw(json)

참고) IIS에서 backend 구현서 @json 으로 출력하면 " 표시가 " 로 변경되어 표시되어서  @Html.Raw 명령어사용

--------------------------------------------------------------------------------------------------------------------------------------------------

 

FrontEnd 환경

Language : React 사용

Client 소스

import './App.css';

import axios from 'axios';

import { useEffect, useState } from 'react';

 

function App() {

 

const [data,setData] = useState("");

 

useEffect(()=>{

axios.get('jsonrtn.cshtml').then(function(response){

setData(response.data);

}).catch(err=>{

console.log(err);

})

},[])

 

return (

<div className="App">

<div>Main Page</div>

{data && data.map(v => (<li key={v.Prod_Nm}>{v.Prod_Nm}</li>))}

</div>

);

}

export default App;