[React] - 리액트에서 서버와 통신하기 : ajax

서버란?

서버(server)란 유저가 데이터를 달라고 요청하면 보내주는 역할을 한다. 네이버웹툰 서버는 유저가 웹툰을 요청하면 웹툰을 보내주는 프로그램이고, 유튜브 서버는 유저가 영상을 요청하면 영상을 보내주는 프로그램인 것이다.

하지만 유저가 그냥 데이터를 달라고 요청하는 게 아니라, 정확한 규격에 맞춰서 서버에 요청을 해야 서버가 데이터를 보내준다. 유저는 아래 두 가지를 명시해서 요청을 보내야 한다.

1. 어떤 데이터인지 (url 형식으로)
2. 어떤 방법으로 요청할지 (GET or POST)

데이터를 가져올 때는 보통 GET을, 데이터를 서버로 보낼 때는 POST를 고르면 된다. 그리고 어떤 데이터를 받고 싶은지 URL을 잘 기재해야 하는데, 내가 원하는 데이터의 URL로 GET 요청을 하면 데이터가 오는 것이다.

GET/POST 요청하는 법

• GET 요청을 하는 가장 쉬운 방법은 브라우저 주소창의 url 란에 아무거나 입력하는 것인데, 그곳으로 GET 요청이 가게 된다.

• POST 요청을 하고 싶으면

  	<form action="요청할 url" method="post"> 

  태그를 이용하면 된다. 이렇게 하면 폼이 전송되었을 때 POST 요청이 가게 된다.

• 단, 위와 같이 요청을 했을 때 단점은 브라우저가 새로고침 된다는 것이다.

AJAX란?

AJAX란 서버에 GET, POST 요청을 했을 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 새로고침 없이 쇼핑몰의 상품을 더 가져오거나, 댓글을 서버로 바로 전송하는 것 등의 기능을 가능하게 해준다.

AJAX을 이용한 GET/POST 요청 방법 3가지

1. XMLHttpRequest라는 옛날 문법 쓰기
2. fetch() 라는 최신 문법 쓰기
3. axios 같은 외부 라이브러리 쓰기 (가장 편함)

3번이 가장 간단하므로 3번으로 요청해보자.

npm install axios

버튼을 눌렀을 때 url을 통해 GET 요청을 하는 코드

import axois from 'axios'
  
function App() {
        <button onClick={()=>{
        axios.get('https://~~~')
         // 데이터 가져온 결과값 출력하기 
        .then((result)=>{
          console.log(result.data);
        })
        .catch(()=>{
          console.log('ajax 요청 실패 예외처리');
        })

      }}>버튼</button>
  }

ajax 요청 동시에 여러개 보내는 법

Promise.all( [axios.get('url1'), axios.get('url2')] )
// 2개 요청 모두 완료 시 특정 코드 실행하고 싶으면 .then()

서버에 POST 요청하는 법

 axios.post('URL', {name : 'kim'})

원래 서버와는 문자 자료만 주고 받을 수 있다. object나 array 같은 자료들은 그대로 주고 받는 것은 불가능하고 대신 자료에 따옴표를 쳐놓으면 가능하다.

ex) "{"name" : "kim"}"

이걸 JSON이라고 하는데, JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있다. 이렇게 해서 결과.data를 출력해보면 따옴표 쳐진 JSON이 나와야 하는데, axios 라이브러리는 JSON -> object/array 변환 작업을 자동으로 해주기 때문에 출력하면 object/array가 나온다.

fetch() 사용 가능
위의 방법 외에도 자바스크립트 문법인 fetch()를 사용해서 GET/POST 요청이 가능하다. 단, JSON처럼 자동으로 알맞은 자료형으로 변환하여 출력해주지는 않으므로 직접 변환해야 한다.

fetch('URL').then(result => result.json()).then((result) => { console.log(result) } )