React, 서버와 통신하려면 ajax

서버

서버: 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램

서버개발을 한다는 것은 어떤 데이터를 요청하면 그 데이터를 보내주세요라고 코드로 짜는 것

 

서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야함

1. 어떤 데이터인지(URL 형식)
2. 어떤 방법으로 요청할지(GET or POST)
   1. 데이터를 가져올때는 GET
   2. 데이터를 보낼때는 POST

GET/POST 요청하는 법

GET요청을 하고 싶을때 쉬운 방법으로는 브라우저 주소창이 있음

주소창에 URL을 적으면 그곳으로 GET 요청을 날려줌

 

POST요청을 하고 싶으면

<form action="요청할url" method="post"> 태그 이용하면 됨

그럼 폼이 전송되었을 때 POST요청을 날려줌

 

다만 GET, POST 요청을 저렇게 날리면 단점으로 브라우저가 새로고침됨

 

AJAX

AJAX는 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능

 

AJAX로 GET/POST 요청하는 법

• XMLHttpRequest라는 옛날 문법 사용
• fetch() 라는 최신 문법 사용
• axios 같은 외부 라이브러리 사용

axios 라이브러리 사용하기

터미널을 열어서

npm install axios

을 입력하고 설치

 

GET 요청하기

axios
  .get(URL)
  .then((변수) => {
	코드
  })
  .catch(() => {
    실패했을때 실행할 코드
  });

1. axios를 쓰려면 상단에 import
2. axios.get(URL)으로 자신이 원하는 URL로 GET요청
3. 데이터 가져온 결과는 변수.data 안에 들어가있음
   1. GET 요청의 결과는 변수에 들어가 있음
   2. 데이터만 사용하고 싶으면 변수.data
4. 인요청에 실패했을 때 실행할 코드는 .catch() 안에 적기

동시에 AJAX 요청을 여러개 날리려면

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

URL1, URL2로 GET요청을 동시에 해줌

둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 됨

 

POST 요청하기

axios.post('URL', 데이터)

서버로 원하는 데이터 자료가 전송됨

완료시 특정 코드를 실행하고 싶으면 .then()을 뒤에 붙이면 됨

 

원래는 서버와 문자자료만 주고 받을 수 있음

object, array 못주고 받음

object, array 자료를 주고 받고 싶다면 따옴표를 사용하면 됨

"{"name" : "Lee"}"

이런것을 JSON 이라고 함

JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있음

 

그래서 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야하는데

axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서 

출력해보면 object, array가 나옴

 

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

자바스크립트 문법인 fetch() 를 이용해도 GET/POST 요청이 가능하지만

JSON을 object, array로 직접 바꾸는 작업이 필요함