[React] React에서 Ajax & Ajax 사용법

1. Ajax란 ?

• 서버에 새로고침없이 요청(비동기적으로)을 할 수 있게 도와주는 일종의 JS코드이다.
• 단순하게 말하면 서버랑 데이터를 주고 받기 위한 기술이다. 
• 서버로 데이터를 주고받기위해서는 GET, POST 등 (메소드) 을 통해 요청가능하다. 

2. 사용방법

• React에서 Ajax를 사용하는 일반적인 방법으로는 두 가지가 있다.
• "fetch" API 또는 "axios" 같은 HTTP 클라이언트 라이브러리를 설치해서 사용할 수 있다. 
• fetch API : HTTP를 구성하는 요청과 응답 등을 JavaScript로 접근 조각이 가능하게 해주는 매서드 
• axios : Promise 기반의 API를 제공하여 비동기식 HTTP 요청을 보내고 응답을 처리하는 JavaScript 라이브러리 

파고들다보면 fetch랑 axios는 추가로 따로 정리해야할정도로 내용이 있어서 일단 간단히 요약하면 위와 같다.

 

3. 라이브러리 설치

• VSCORD 환경 기준으로는 터미널에서 다음과 같은 명령을 입력한다.

npm install axios

 

• 정상적으로 설치가 끝나면 리액트 메인 파일에 import를 해준다.

import axios from 'axios'

 

• get 요청을 이용하면 다음과 같이 서버에서 데이터를 가져올 수 있다.

 axios.get('url주소');

 

 

• 받은 데이터를 출력해보고싶으면 then/catch로 받으면 된다. 

/* <-- 버튼 클릭 시 데이터를 가져오는 예시 --> */

<button onClick={()=>{ axios.get('https://aaa.io/data.json')
.then((결과)=>{
console.log(결과.data);
})
.catch(()=>
{ console.log('fall');
 })
}}>버튼</button>

/* 
then은 요청이 성공하면 데이터를 받아온다. 
데이터 요청 실패 시 catch는 오류를 어떻게 처리할지 정한다.  
*/

 

• React에서는 데이터를 state로 받아서 사용가능하다.

/* <-- 데이터를 state 변수에 넣는예제 --> */
let [test,setTest] = ('');

<button onClick={()=>{ axios.get('https://aaa.io/data.json')
.then((결과)=>{
let copy_data = [...결과.data];
setTest(copy_data);
})
.catch(()=>
{ console.log('fall');
 })
}}>버튼</button>

/* 
 위와 같이하면 [...결과.data]; 를 통해 object형의 {} 벗겨서 새로운 변수로 복사해 추가할 수 있다.
*/

 

• ConCat를 통해 데이터를 받을 수 도 있다.

/* <-- 데이터를 state 변수에 넣는예제 --> */
let [test,setTest] = ('');

<button onClick={()=>{ axios.get('https://aaa.io/data.json')
.then((결과)=>{
let copy_data = test.concat(결과.data);
})
.catch(()=>
{ console.log('fall');
 })
}}>버튼</button>

/* 
 concat을 이용하면 기존배열을 토대로 변경한 새로운 배열을 리턴하는 방법을 이용해서 가능하다. 
*/

 

4.  이점

• fetch()와 다르게 Ajax를 사용하면 JSON데이터를 Object로 알아서 변경해준다. 
  (서버에서는 원래 문자만 주고받을 수 있지만 Array , Object데이터는 " " 로 감싸면 주고받기가 가능하다.
  이걸 JSON데이터라 한다.)
• 비동기 방식이기 때문에 웹 페이지를 새로 고치지 않고도 데이터를 동적으로 로드하고 업데이트 가능하다.
• 클라이언트 측에서 데이터를 처리하기 때문에 서버 측의 부하가 덜 간다.
• JSON( JavaScript Object Notation ) : 데이터를 쉽게 교환하고 저장하기 위한 텍스트기반 데이터 교환표준 

 

5.  기타 (응용)

• get요청을 여러번 처리할 때 다음과 같이 처리도 가능하다.

Promise.all([ axios.get('/url1'), axios.get('/url2')]).then((결과)=>{});

 

 

• POST요청은 다음과 같이 처리한다. 

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