[React]DB 데이터를 화면에 불러오기

 

일단 결과 화면 -! 

 

 

DB에 있는 데이터들이 화면에 잘 보이는 것을 확인 할 수있다. 

 

 

파일 구성 : 

 

 

1. server.js에서 길 지정하기 

 

const board = require('./routes/board');
const PORT = 4000;

// board 처리는 './routes/board'에서 처리 
app.use('/board', board);

// server port 4000 할당
// 클라이언트와 다른 번호로 충돌나지 않도록
app.listen(PORT, () => {
    console.log(`Server run : http://localhost:${PORT}/`)
})

 

app.use를 이용해서 uri에 /board가 있다면 board라고 지정된 const, 즉 /routes/board에서 처리하도록 만들었다. 

 

 

2. server/routes/board.js 에서 쿼리 생성 

 

const express = require('express');
const router = express();
const db = require('../config/db')


 
// http://localhost:4000/board 으로 접속 시 응답메시지 출력

router.get(`/:category_id`, (req, res) => {
    var params = req.params;
    db.query(`SELECT * FROM posts where category_id = ${params.category_id}`,(err,data)=>{
        if(!err) res.send({ products : data});
        else res.send(err);
    })
});



module.exports = router;

category_id를 파라미터로 받아서 각 카테고리idx에 해당하는 글들을 send하도록 코드를 만들어준다. 

 

 

3. 테이블 리스트에서 get을 보내 데이터를 받는다.  

 

TableList.js

function TableList() {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    (async () => {
      try {
        const res = await axios.get('/board/1');
        setTableData(res.data.products);

      } catch (e) {
        console.error(e.message)
      }
    })();
  }, [])

 

axios.get('/board/1') 을 날린다. 

1은 파라미터로 category_id =1 을 의미한다. 

setTableData를 이용해 받은 데이터를 tableData에 저장한다. 

 

 

 

4. 테이블에 받은 데이터를 보여준다.

<tbody className="table-group-divider">
            {
              tableData.map((data) => {
                return (
                  <tr key={data.id}>
                    <th scope="row">{data.id}</th>
                    <td>{data.thumbnail}</td>
                    <td>{data.author_id}</td>
                    <td>{data.created_at.substr(0,10)}</td>
                  </tr>
                );
              })
            }

 

데이터가 들어있은 tableData를 map을 이용해서 돈다. 

시간은 substr을 통해서 10글자만 보이도록 만들어준다. 

 

 

 

 

이렇게 데이터베이스에 저장된 값이 프론트로 잘 보인다.