이제 서버에서 검색된 내용을 받아 해당 호텔 리뷰 데이터를 찾은 다음, 프론트로 다시 보내주는 법을 배워야합니다.

이 부분은 정말 쉽기 때문에 빠르게 작성하고 넘어가겠습니다. 진도가 넘느려용 ㅜㅜ

✈ DB보내는 기능 구현

Express부분

일단 DB가 설정이 되어 있지 않기때문에 그냥 데이터 보내는 법만 구현해 놓고, DB설정해서 연동시키면 그때 해당 호텔에 맞게 DB를 검색해서 객체로 내보내는 법으로 수정하겠습니다.

server.js에서 할 일은 간단합니다. res를 사용하여 보내면 됩니다. ㅎㅎ

// server.js
app.post('/text', (req, res) => {
  // 데이터 받는 곳
  const text1 = req.body.name;
  console.log(text1);

  // 데이터 보내는 곳
  let sendData;
  if (text1 == '호텔1') {
    sendData = {
      data: '호텔1 데이터 test',
    };
  } else if (text1 == '호텔2') {
    sendData = {
      data: '호텔2 데이터 test',
    };
  } else {
    sendData = {
      data: '호텔3 데이터 test',
    };
  }
  res.send(sendData);
});

이전에 post에서 데이터 받는 부분 아래에다가 데이터 보내는 함수를 적어줍니다. if문은 test함수 답게 호텔1,2,3별로 나누어 testData를 객체로 반환시켜줍니다.

그리고 res.send()로 객체를 내보내면 끝 ㅎ

React부분

React부분도 추가할건 몇개 없습니다. 나중에 라이브러리 들어가면 좀 바뀌겠죠. 그냥 화면상에 띄우는건 쉽습니다.

import React, { useState } from 'react';
import axios from 'axios';

function Hotels() {
  const [hotelName, setHotelName] = useState(null);
  const [reviewData, setReviewData] = useState(null); // review 담을 state 추가

  /*
   * 생략
   */ 
  
  const fetchHotelName = async() => {
    const response = await axios('http://localhost:3001/text', {
      name: hotelName
    });
    setReviewData(response.data);
    // data속에 담겨져 나온다.
  };

  return (
    <div>
      <h1>호텔 검색</h1>
      <select id="hotels-select" onClick={handleSearch}>
        <option value="호텔1" selected>
          호텔1
        </option>
        <option value="호텔2">호텔2</option>
        <option value="호텔3">호텔3</option>
      </select>
      <button id="hotels-search">검색</button>
    </div>
  );
}

state에 review데이터 담을 것 추가하고, async방식으로 data를 받아 state에 추가하는 것입니다. 그러면 담은 state가 땋! 하고 나타나죠.

정말 쉽죠?? ㅎㅎ 이제 DB를 설정할 건데요. MySQL을 사용해서 Express랑 연동해보도록 하겠습니다. 그리고 그 전에 분석해둔 csv파일을 MySQL 테이블안에 넣을 거에요. 다음 포스팅에서 설명하도록 하겠습니다!

이전 포스팅: Express와 React 연동하기(React에서 Express로 데이터 보내기)
다음 포스팅: csv파일을 MySQL에서 불러오기