React 와 Express 연동하기 1 (React에서 Express로 데이터 보내기)

React와 Express를 연동하는 방법을 해보겠습니다.

 

1. 준비과정

create-react-app 앱이름

으로 앱을 만들고

 

npm start

하여 앱을 실행시켜줍니다.

 

react로 앱을 처음 만들고 실행한 상태로 진행합니다.

 

2. Express 설치 및 Hello worlde 실행

 

위에서 설치한 앱의 경로에서 아래의 명령어를 실행하여 설치하여 줍니다.

 - 설치 공식문서 -

npm install express --save

*참고로 --save 종속 항목 목록에 저장하는 것입니다.

 프로젝트를 git으로 다른 곳에서 작업할 때 express를 새로 받아야 하지만

--save로 종속 항목 목록에 저장되어 있으면 "npm install" 명령어로 알아서 받을 수 있게 해 줍니다.

 

설치가 완료되면 아래와 같이 server폴더 안에 server.js 파일을 만들어줍니다.

그 후 아래의 코드를 작성해주시면 됩니다.

이때 주의할 점은 port = 3000 이 부분을 다른 포트로 하셔야 합니다.

그 이유는 react를 실행하게 되면 기본 포트가 3000이기 때문에 겹쳐서 충돌이 생깁니다.

const express = require('express')
const app = express()
const port = 3001 // <- 3000에서 다른 숫자로 변경

app.get('/', (req, res) => {
  res.send('Hello World!')
})

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

서버 실행하기

 

위에서 만든 server 경로 이동하여 아래의 명령어를 실행합니다.

node server.js

정상적으로 실행되면 위에서 적어주었던 port번호 서버가 실행된 것을 볼 수 있습니다.

Example app listening at http://localhost:3001

localhost:3001로 접속하면 Hello World! 가 정상적으로 나오는 것을 확인할 수 있습니다.

실행결과

3. React에서 express로 데이터 보내기

 

React에서 express로 데이터를 보내는 방법을 알아보겠습니다.

 

새로운 js파일을 아래와 같이 만들어줍니다.

저는 파일 이름을 Example3로 하였습니다.

 

Example3.js

import React from "react";

export default class Example3 extends React.Component {
  state = {
    text: "",
  };

  handlChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <input name="text" onChange={this.handlChange}></input>
        <button>전송</button>
        <h3>{this.state.text}</h3>
      </div>
    );
  }
}

지난 블로그 글을 참고하여 input과 전송 button을 만들어 주고 onChange함수를 추가합니다.

 

App.js

import React from "react";
import Example3 from "./Example3";

function App() {
  return (
    <div>
      <Example3 />
    </div>
  );
}

export default App;

 App.js를 위와 같이 수정하고 실행시킵니다.

 

실행하면 input과 전송 버튼이 생깁니다.

그리고 input에 글을 작성하면 작성한 내용이 나오게 됩니다.

 

 

버튼을 클릭해하여 state안의 text를 보내는 함수를 작성해 줍니다.

 

onclick 함수 추가

import React from "react";

export default class Example3 extends React.Component {
  state = {
    text: "",
  };

  handlChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  onclick = () => {
    const textbox = {
      inText: this.state.text,
    };
    fetch("http://localhost:3001/text", { /text 주소에서 받을 예정
      method: "post", //통신방법
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(textbox), //textbox라는 객체를 보냄
    });
  };

  render() {
    return (
      <div>
        <input name="text" onChange={this.handlChange}></input>
        <button onClick={this.onclick}>전송</button>
        <h3>{this.state.text}</h3>
      </div>
    );
  }
}

 새로 만든 onClick 함수안에 fetch 함수를 작성하여 server에 보낼 준비를 합니다.

fetch를 간단히 설명하자면 

url주소는 우리가 데이터를 보낼 주소입니다.

위에서 Express를 3001번 포트를 사용하였기 때문에 localhost:3001로 적어줍니다.

그리고 그 뒤의

• method : 보내는 방법 get post delete 등이 있음
• headers: API 응답에 대한 정보를 담음
• body: 전달할 내용입니다. 통신할때는 객체로 통신하기에 객체 타입으로 작성해야 함

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

npm install cors

npm install body-parser

cors와 body-parser을 설치하여 줍니다.

관련 설명은 맨 밑에 공식문서와 잘 정리된 블로그로 대체 하겠습니다.

 

server.js 수정

const express = require("express");
const app = express();
const port = 3001; // <- 3000에서 다른 숫자로 변경
const cors = require("cors");
const bodyParser = require("body-parser");

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

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.post("/text", (req, res) => {//데이터 받는 곳
  const text1 = req.body.inText;
  console.log(text1);
});

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

  추가된 const나 app.use는 cors와 body-parser을 사용하기 위해 추가한 것입니다.

 

중요한 것은 아래 부분입니다.

app.post("/text", (req, res) => {
  const text1 = req.body.inText;
  console.log(text1);
});

app. 뒤에 통신방법을 적습니다(post)

그 위 통신할 주소를 적습니다. fetch함수에서 작성한 /text를 적습니다.

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

여기까지 하셨으면 react에서 express로 데이터를 보낼 수 있습니다.

변경한 것을 모두 저장하고 실행합니다.

 

React는 저장하면 변경사항이 바로 적용되지만

Express는 바로 적용되지 않습니다.

node server.js로 다시 실행해줍니다.

 

 

4. 결과 화면

결과 이미지

다음 글에서는 보내는 방법을 알아볼게요

 

5. 참고 자료

 

cors공식문서, 블로그

node.js express에서 CORS 허용하기

body-parser 공식문서, 블로그

express 미들웨어 body-parser 모듈