React와 Express를 연결했으니 이제 React에서 호텔이름을 검색하면 서버로 해당 호텔이름을 보내는 기능을 구현해보도록 하겠습니다. 서버에서 프론트에서 검색한 이름을 받아 해당하는 리뷰를 프론트에 보내줘야 하니깐요!

그러려면 React에서 Express로 데이터를 보내는 방법을 알아야겠죵?

일단, 프론트(React)에서 호텔 검색부분부터 만들어 봅시다!

🏤 호텔 검색 기능 구현

React부분

검색 기능을 구현하려고 생각해봤습니다. 근데 보통 호텔을 검색하려면 지역을 먼저 검색하지 않나요? 근데 제가 크롤링한 데이터에는 지역별로 구분하지 않았더군요...
띠로링~

나중에 MySQL로 DB를 생성할 건데 생성한 query에는 지역별로 구분하지 않았어요... 이것이 기획단계의 중요성 ㅜㅜ

뭐 호텔스 컴바인 클론 코딩이 아니기 때문에.. 이는 그냥 select태그를 사용하여 지역별로 호텔을 선택할 수 있도록 하기로 결정했습니다.

이런식으로요! 해당 호텔 이름을 선택 후, 검색을 누르면 해당하는 리뷰단어들이 시각화 되는 방식입니다. 지금은 호텔 이름을 DB에서 가져오지 못했으니 일단 testCase로 호텔1,2,3으로 임시로 설정했습니다.

코드는 다음과 같습니다.

// Hotels.js
import React, { useState } from 'react';
import axios from 'axios';

function Hotels() {
  const [hotelName, setHotelName] = useState(null);
  
  const handleSearch = (e) => {
    setHotelName(e.value);
    
    fetchHotelName();
    });
  };

  const fetchHotelName = async() => {
    const response = await axios('http://localhost:3001/text', {
      name: hotelName
    });
    console.log(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>
  );
}

export default Hotels;

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

$ npm install axios

로 다운한 후 사용하세요.

검색버튼을 클릭하면 state가 select된 value값으로 변경되고 3001포트로 post방식으로 전달됩니다.

Express부분

server.js를 작성해야 하는데 하기전에 설치해야 할 게 있습니다.

$npm install cors
$npm install body-parser

간략하게 설명하자면,

1. CORS란
Cross Origin Resource Sharing의 약자로, 현재 도메인과 다른 도메인으로 리소스가 요청될 경우를 말합니다. 예를 들어, 도메인 http://A.com 에서 읽어온 HTML페이지에서 다른 도메인 http://B.com/image.jpg를 요청하는 경우를 말합니다.. SPA상에서 해당 방법으로 데이터를 전달하려고 CORS를 쓰려고 하는겁니다.

2. body-parser란
express 문서에 따르면 미들웨어 없이 req.body 에 접근하는 경우에는 기본으로 undefined가 설정되어 있으므로 bodyParser, multer와 같은 미들웨어를 사용하여 요청 데이터 값에 접근해야 한다는 안내를 찾을 수 있다고 합니다. 때문에 body-parser로 요청받은 body값을 파싱하는 것이라고 합니다.

저는 프론트 위주기 때문에,,, 자세한 사항은 넘어가도록 하겠습니다. 아 이런게 있구나 하고 알아가는걸로.

이제 server.js를 수정해봅시다.

// server.js
const express = require('express');
const app = express();
const port = 3001;
const cors = require('cors');
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use(bodyParser.json());

app.post('/text', (req, res) => {
  const text = req.body.name;
  console.log(text);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

cors와 bodyparser 그리고 app.post 함수가 추가되었습니다. localhost:3001/text로 통신을 하네요. 이는 CORS를 통해 할 수 있다고 앞에 정리해두었죠.

• req(require) : 앞에서 보낸 객체를 받습니다. body가 앞에서 보낸 hotels입니다.
• res(response) : Express에서 데이터를 보낼 때 사용합니다.

결과

이제 3000포트와 3001포트를 실행시켜 결과를 확인해봅시다.

React 앱 폴더에서 다음 명령을 실행시켜 3000포트를 키고,

$ npm start

다른 커맨드를 켜서 server폴더에서 3001포트를 킵니다.

$ node server.js

저는 이부분할 때 첨에 헷갈렸습니다. 서버를 두개나 실행시켜야하다니... 신기했습니다 ㅎㅎ

React에서 호텔2를 선택해 검색버튼을 눌러봅니다.

다음과 같이 "호텔2"라는 value가 서버에 잘 전달이 된 것을 확인할 수 있습니다.👏👏

이 기본 틀을 가지고 이제 호텔이름들을 DB에서 전달받아 option값에 넣어두고, 선택하면 이름이 전달되어 해당 review값들을 프론트에 내보내면 됩니다. 이러면 서버와 통신이 두번하게 되는,, 느린 웹이 만들어지겠지만... 일단 계획은 그렇게하는걸로 하고, 안되면 DB를 수정하던지, 노가다로 호텔이름을 적던지 해야지... ㅜㅜ

다음은 express에서 react로 데이터를 보내는 법을 배워서 검색된 review 데이터를 보내는 방법에 대해 틀을 잡아볼 겁니다.

---

이전 포스팅: Express와 React 연동하기(React와 Express 준비하기)
다음 포스팅: Express와 React 연동하기(Express에서 React로 데이터 보내기)