[React] express에서 query문을 사용하여 DB(mysql)에 데이터 가져오기

이전 글에서 웹에서 입력한 데이터를 DB에 저장하였습니다.

이번 글에는 저장한 데이터를 불러오는 작업을 해보 할게요.

 

1. 준비

이전 글에서 한 코드를 그대로 이어서 사용하도록 하겠습니다.

 

2. 웹 페이지 수정하기

DB에서 데이터를 가져와 화면에 뿌려주는 버튼을 만듭니다.

import React from "react";

export default class Example3 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: "",
    };
  }

  onclick = () => {
    fetch("http://localhost:3001/data", { 
      method: "post", //통신방법
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(),
    })
      .then((res) => res.json())
      .then((json) => {
        console.log(json);
        this.setState({
          data: json.user_id,
        });
      });
  };

  render() {
    return (
      <div>
        <h1>데이터 가져오기</h1>
        <h3>{this.state.data}</h3>
        <button onClick={this.onclick}>가져오기</button>
      </div>
    );
  }
}

 위의 코드를 실행하면 아래와 같은 화면이 나옵니다.

 express에서 데이터 가져오는 글의 내용과 대부분 비슷합니다.

 json.user_id는 json에 이전 글에 저장한 데이터 칼럼에 user_id를 가져오기 위함입니다.

 

실행 화면

3. server.js 추가하기

app.post("/data", (req, res) => {
  connection.query("SELECT * FROM new_table", function (err, rows, fields) {
    if (err) {
      console.log("데이터 가져오기 실패");
    } else {
      console.log(rows[0]);
      res.send(rows[0]);
    }
  });
});

server.js에 위의 코드를 추가해 주시면 됩니다.

저는 query문을 new_table에 있는 모든 데이터를 가져오게 하였습니다.

본인이 가져오고 싶은 데이터에 맞게 쿼리문을 작성하시면 됩니다.

쿼리문 작성 후 콜백 함수 function을 사용하여 불러온 데이터를 res.send로 보내줍니다.

여기서 rows는 테이블 안의 모든 칼럼을 배열로 가져오게 됩니다.

rows [0]을 하여 배열에 저장된 처 음번 칼럼을 보냅니다.

 

4. 결과

 

결과를 보기 전에 DB에 있던 데이터를 확인해 볼까요??

wonyoung이란 데이터 하나가 있습니다.

이제 가져오기 버튼을 누르면

new_table에 있는 wonyoung이란 user_id를 가져오게 됩니다.

 

이걸로 간단한 백앤드 작업을 익혔습니다.

 

다음 글에서는 간단한 회원가입과 로그인 기능을 만들어 보겠습니다.