[React] 서버와 통신하는 Ajax

데이터베이스에 접근하기 위해 서버와 통신을 주고받을 때 기본적으로 새로고침을 해야 받은 데이터를 확인할 수 있는데 Ajax를 이용하면 새로고침이 없더라도 데이터를 주고받을 수 있습니다.

Ajax를 사용하는 방식으로는 총 3가지가 존재합니다.

1. XMLHttpRequest 문법

2. fetch()

3. axios

 

1번 방식은 너무 오래되기도 했고 요즘 많이 사용하는 방식으로는 2번 fetch함수와 3번 외부라이브러리인 axios를 사용합니다. 2번과 3번은 둘 다 비슷하지만 fetch는 데이터를 json문자열로 받아오기 때문에 데이터를 사용할 수 있게 배열로 만들어서 사용해야하하고, axios는 json문자열로 넘어온 데이터를 자동으로 배열로 만들어 주기 때문에 따로 변경 없이 데이터를 사용할 수 있습니다.

 

Ajax 사용하기

axios.method('경로', //post인 경우 전송할 테이터 {데이터 : 전송데이터})
.then((결과)=>{
  // 결과를 이용한 코드작성
})
.catch(()=>{
  // 에러
})

서버통신메서드로 가장 많이 사용되는건 바로 get과 post입니다. (이 외에도 put과 delete가 존재합니다.)

또한 경로는 백엔드에서 제공하는 경로를 입력하면 해당 경로에 접근한 백엔드 코드가 데이터베이스에 접근을 하여 필요한 데이터를 전송해 줍니다.

 

만약에 URI가 여러개인 경우에는 아래와 같은 코드로 결과를 받을 수 있습니다.

Promise.all([axios.get('경로1'), axios.get('경로2')])
.then(()=>{})
.catch(()=>[})