react 와 nodejs 간단한 예제

Question

reactApp.jsimport { useState} from 'react';import Button from '@mui/material/Button';import TextField from '@mui/material/TextField';import { DataGrid } from '@mui/x-data-grid';function App() { const [usid, setUserId] = useState(''); const [rows, setRows] = useState([]); const columns = [ { field: 'usid', headerName: '인사사번', width: 100 }, { field: 'usernm', headerName: '이름', width: 150 }, { field: 'rrno', headerName: '생년월일', width: 100 }, { field: 'deptnm', headerName: '부서', width: 200 }, { field: 'octy_cd', headerName: '직종', width: 150 }, { field: 'ocgr_cd', headerName: '직급', width: 150 }, { field: 'clph_no', headerName: '전번', width: 150 }, { field: 'basic_addr', headerName: '주소', width: 300 }, ]; const search = async () => { try { const response = await fetch('http://localhost:4000/list',{ method:'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ usid: usid }), }); const { rows } = await response.json(); console.log(rows); // 데이터를 콘솔에 출력합니다. const rowsWithId = rows.map((row, index) => ({ ...row, id: index + 1 })); setRows(rowsWithId); // 데이터를 상태에 설정합니다. } catch (error) { console.error('Error fetching data:', error); } }; return (

ID setUserId(e.target.value)} size="small" />

row.id} columns={columns} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection />

);} export default App;서버(Nodejs)app.jsconst express = require('express') ,http = require('http') ,path = require('path')const cors = require('cors')var bodyParser = require('body-parser');const app = express() app.use(cors()) app.use(bodyParser.urlencoded({extended:true}));app.use(bodyParser.json());const oracledb = require('oracledb');oracledb.initOracleClient({libDir: 'C:\instantclient_18_5'});var router = express.Router();var myBatisMapper = require('mybatis-mapper');myBatisMapper.createMapper(['./oracle-mapper.xml'])router.post('/list',function(request, response){ oracledb.getConnection({ user : "", password : "", connectString : "" }, function(err,connection){ if(err){ console.err(err.message); return; } var param = { usid : request.body.usid } let format = {language:'sql', indent: ' '}; let query = myBatisMapper.getStatement('oracleMapper','getUserList',param,format); //console.log(query); connection.execute(query, [], function(err,result){ if(err){ console.error(err.message) connection.close(); return; } console.log(result) response.json(result) connection.close(); }) }) })// 라우터 객체를 app 객체에 등록app.use('/', router);app.all('*', function(req,res){ res.status(404).send('

ERROR - 페이지를 찾을수 없습니다.

');});http.createServer(app).listen(4000,function(){ console.log("server start..")})리액트 오라클 데이타 가져오기 독학하고 있는데요데이타가 들어온 것 같은데 표시되지 않습니다.필드점검 및 여러가지 보는데 도저히 모르겠네요 ㅜㅡ.혹시 좀더 살펴봐야할것좀 있을까요?

kenu,전독시 · Answer

데이터가 서버에서 제대로 가져와졌지만 DataGrid에 표시되지 않는 문제를 해결하기 위해 다음 단계를 따라보세요:1. *데이터 구조 확인*: 서버에서 반환된 데이터 구조가 DataGrid에 필요한 형식과 일치하는지 확인하세요. 각 행은 열의 field 속성과 일치하는 키를 가진 객체여야 합니다. 예를 들어, 열에 { field: 'usid', headerName: '인사사번' }이 있다면, 각 행 객체는 usid 속성을 가져야 합니다.2. *콘솔에서 오류 확인*: 데이터를 가져오거나 DataGrid를 렌더링하는 동안 발생할 수 있는 오류를 콘솔에서 확인하세요.3. *상태 설정 전 데이터 검사*: setRows(rowsWithId)를 호출하기 전에 rowsWithId를 콘솔에 로그로 출력하여 올바른 형식인지 확인하세요. 이는 데이터 구조 문제인지 다른 곳에서 발생하는 문제인지 파악하는 데 도움이 될 수 있습니다.4. *getRowId의 올바른 사용 확인*: getRowId={(row) => row.id}를 사용하여 행 ID를 설정하고 있습니다. 각 행 객체가 id 속성을 가지고 있는지 확인하세요. 데이터에 id 속성이 없다면, 다른 고유 식별자를 사용하도록 조정해야 할 수 있습니다.5. *@mui/x-data-grid 업데이트 확인*: 최신 버전의 @mui/x-data-grid를 사용하고 있는지 확인하세요. 문제를 해결하거나 개선된 기능이 있을 수 있습니다.6. *DataGrid 속성 검토*: DataGrid 컴포넌트에 전달하는 속성들을 다시 한번 확인하세요. 예를 들어, pageSize와 rowsPerPageOptions는 필요에 따라 설정되어야 합니다. 이들이 올바르게 설정되지 않으면 행의 렌더링에 영향을 줄 수 있습니다.7. *테스트를 위해 단순화*: 일시적으로 정적인 행과 열 세트를 렌더링하여 DataGrid가 올바르게 작동하는지 확인하세요. 이 작업이 성공한다면, 동적 데이터와 기능을 점차 다시 도입하세요.8. *CSS 문제 확인*: 때때로 CSS가 요소를 숨기거나 올바르게 표시하지 못하게 할 수 있습니다. 브라우저의 개발자 도구를 사용하여 DataGrid 컴포넌트를 검사하고, CSS로 인해 행이 DOM에 존재하지만 보이지 않는 경우를 확인하세요.위의 단계를 따르고도 문제가 해결되지 않는다면, @mui/x-data-grid 커뮤니티나 Stack Overflow 등의 플랫폼에서 도움을 청하는 것을 고려해 보세요.Citations:[1] https://stackoverflow.com/questions/66950096/material-ui-datagrid-server-side-pagination-issue-when-setting-rowcount[2] https://mui.com/x/react-data-grid/server-side-data/[3] https://www.freecodecamp.org/news/how-to-integrate-material-ui-data-grid-in-react-using-data-from-a-rest-api/[4] https://mui.com/x/react-data-grid/pagination/[5] https://github.com/adazzle/react-data-grid[6] https://www.ag-grid.com/react-data-grid/server-side-model/[7] https://blog.ag-grid.com/react-get-started-with-react-grid-in-5-minutes/[8] https://js.devexpress.com/React/Documentation/Guide/UI_Components/DataGrid/Paging/[9] https://www.ag-grid.com/react-data-grid/deep-dive/[10] https://reactdatagrid.io/docs/filtering[11] https://js.devexpress.com/React/Documentation/ApiReference/UI_Components/dxDataGrid/[12] https://mui.com/x/react-data-grid/[13] https://github.com/mui/mui-x/issues/3546[14] https://reactdatagrid.com/docs/welcome/[15] https://js.devexpress.com/React/Documentation/20_1/ApiReference/ui_components/dxdatagrid/Configuration/from: https://www.phind.com/search?cache=rbmup6p2ib3m2gb3z9y8unuu

react 와 nodejs 간단한 예제

1개의 답변

Q&A 목록