[React] AJAX에 대해서 알아보자

서버란?

- 유저가 데이터를 달라고 요청을 하면 데이터를 보내주는 프로그램입니다.

 

데이터를 달라고 요청할 때는 정확한 규격에 맞춰서 요청을 해야 서버에서 데이터를 받을 수 있습니다.

1. 어떤 데이터인지 (URL 형식)

2. 어떤 방법으로 요청할지 (GET, POST)

GET - 데이터를 가져올 때

POST - 데이터를 보낼 때

 

GET, POST 요청을 날릴때 단점으로 브라우저가 새로고침이 됩니다. 이 단점을 보완하기 위해 AJAX 기능을 사용합니다.

 

AJAX란?

- 웹페이지의 전체 페이지를 새로 고치지 않고, 페이지의 일부분만을 서버에서 가지고 와서 '웹페이지 화면을 동적으로 변경하는 방식입니다.

 

AJAX로 GET/POST 요청하는 방법 3개가 있습니다.

1. XMLHttpRequest 옛날 문법 사용

2. fetch() 최신 문법 사용

3. axios 같은 외부라이브러리 사용

 

axios를 사용하여 GET/POST를 요청해보도록 하겠습니다.

먼저, 설치를 해줍니다.

npm install axios

 

 

버튼을 클릭했을때 GET 요청을 받는 소스를 만들어보자.

 <button onClick={()=>{
      axios.get('서버주소')
      .then((result)=>{
        console.log(result.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>

 

1. axios.get(URL)을 입력하면 URL로 GET 요청이 됩니다.

2. 인터넷이 되며 URL이 정상적으로 연결이 된다면 then에 result.data가 출력이 됩니다.

3. 인터넷이 안되거나 URL이 비정상적으로 연결이 된다면 catch에 '실패함'이 출력이 되게 됩니다.

 

 

POST를 요청하는 방법도 알아보자.

 

서버에 { name : 'kim' } 자료를 전송하고자 한다면,

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

위와 같이 post뒤에 보낼 서버 주소를 입력하고 원하는 데이터를 POST 요청 하면 됩니다.

 

 

만약 동시에 AJAX 요청 여러개를 하고 싶다면,

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

이렇게 코드를 짜게 되면 URL1, URL2로 GET요청을 동시에 해줍니다.