React 클라이언트와 서버 데이터 통신하기

React 에서 client와 server가 통신하는 법이다.

서버에 데이터를 요청했을 때 프론트에서 데이터를 받으려면 기본 제공하는 api인 fetch를 이용하거나

라이브러리를 이용할 수 있다. 라이브러리는 axios를 사용해보겠다.

 

1. fetch

서버 주소와 HTTP 메서드만 있으면 된다.

fetch('http://localhost:5000/api/todo')
.then((response) => response.json())
.then((data) => console.log(data));

이런식으로 작성하면 된다. 메서드를 입력하지 않으면 GET 요청이 기본값이다.

react 개발 중인 client에 위 같이 입력을 한다면

server에 있는 데이터를 받아와서 콘솔창에 보여줄 것이다.

 

그러면 client에서 입력받은 내용을 server로 보내려면 아래와 같이 한다.

fetch('http://localhost:5000/api/todo',{
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  }
  body: JSON.stringify({
    text,
    done,
  }),
});

 

 

2. axios

일단 사용할 곳에 axios를 install 한다.

npm install axios

그리고 axios를 사용할 client 파일에서 상단에 아래와 같이 import를 해주고

import axios from 'axios';

 

아래와 같이 get 요청을 할 수 있다.

axios.get('http://localhost:5000/api')
     .then((response) => {
     	console.log(response.data);
     });

 

또는 .then 대신에 await를 사용할 수도 있다.

여기서 주의점은 awiait 를 사용하기 위해서는 함수안에 있어야 하고

그 함수는 async 로 되어있어야한다.

따라서 예제는 아래와 같다.

const example = async () => {
  const response = await axios.get('http://localhost:5000/api');
  console.log(response.data);
};

 

 

post 는 아래와 같다.

axios.post('http://localhost:5000/api', {보낼 데이터});

이 또한 동시에 처리되지 않게 async 와 await를 사용하면 아래와 같다.

const example = async () => {
  const response = await axios.post('http://localhost:5000/api', { 보낼 데이터 });
};