[React] Ajax

안녕하세요 오늘은 React 에서 ajax를 이용하여 서버와 비동기 통신을 하는 방법을 포스팅하겠습니다 !

아직 개인 서버를 두고 공부중인게 아니라 강의에서 제공하는 서버에서 GET 요청을 보내서 데이터를 가져왔습니다.

보통 서버로부터 데이터를 가져올 때는 GET을 사용 , 데이터를 서버로 보낼 때는 POST를 사용합니다.
하나 문제는 , GET,POST 요청을 하면 브라우저가 새로고침이 됩니다.

이럴 때 유용하게 쓰이는 것이 AJAX (Asynchronous Javascript And Xml) 입니다.
AJAX는 새로고침 없이 데이터를 주고받을 수 있게 도와주는 비동기 통신방법입니다.

React에서 Ajax를 사용하는 방법은 3개가 있습니다.
1) XMLHttpRequest 문법
2) fetch()
3) axios(액시오스) 외부라이브러리
저는 강의에서 배운 axios를 사용하겠습니다.

---

터미널에서 npm install axios 실행

import axios from 'axios'

 

<button onClick={()=>{

            axios.get('URL').then((결과)=>{

              console.log(결과.data)

            })

            .catch(()=>{

              console.log('실패함')

            })

          }}>버튼</button>

1) 상단에 import 
2) axios.get(url) 을 코딩하면 해당 url로 get 요청을 보냄
3) 그 뒤에 .then((결과)=> { 서버통신 성공시 실행문장 }) 문법을 사용
4) 데이터를 가져온 결과는 결과.data 에 담겨있음
5) 서버와 통신이 불안정하여 안되거나 , URL이 잘못 된 경우 실패하게됨
-> .catch( 서버통신 실패시 실행문장 ) 안에 예외처리 코딩
* 원래 서버에서는 문자자료만 주고받을 수 있음
* 그러나 axios는 JSON을 object/Array로 변환작업을 자동으로 해줌
* ajax 통신 방법중 하나인 fetch()를 사용하면 위의 변환작업을 수동으로 해줘야 함